/* ---- theme tokens ---------------------------------------------------------- */
/* The site's colours, once. <html data-theme="dark"> (set by the head fragment
   from the dark-mode cookie) switches every value below; the stylesheets of the
   2026 pages use these and nothing else for text, surfaces and rules. Prefixed
   --ic- so they never collide with the git-sim viewer's own --bg / --text. */
:root {
	color-scheme: light;
	--ic-bg: #ffffff;            /* the page */
	--ic-card: #ffffff;          /* a card or menu */
	--ic-panel: #f8fafc;         /* a recessed panel: code, steps, strips */
	--ic-ink: #1e1b4b;           /* headings, strong text */
	--ic-text: #1f2328;          /* body text on cards */
	--ic-text-2: #3f3f6e;        /* secondary body text */
	--ic-lead: #312e81;          /* lead paragraphs */
	--ic-muted: #64748b;         /* captions, kickers, fine print */
	--ic-rule: #e2e8f0;          /* hairlines */
	--ic-rule-2: rgba(128,128,128,.16);
	--ic-chip: rgba(0,0,0,.05);  /* a quiet chip or hover */
	--ic-shadow-card: 0 3px 4px 0 rgba(0,0,0,.10), 0 1px 8px 0 rgba(0,0,0,.08);
	--ic-shadow-hover: 0 18px 40px -22px rgba(30,27,75,.4), 0 2px 8px rgba(0,0,0,.06);
	--ic-shadow-pop: 0 18px 40px -22px rgba(30,27,75,.45), 0 2px 8px rgba(0,0,0,.06);
	--ic-kicker-bg: #1e1b4b;     /* navy stickers, pills and buttons with white text */
	--ic-hero-bg: #fff7ed;       /* the hero card's paper */
	--ic-hero-dots: #e2e8f0;
	--ic-blob-opacity: .34;
	--ic-accent: #4f46e5;  --ic-accent-2: #6366f1;  --ic-accent-ink: #3730a3;  --ic-accent-soft: #eef2ff;  --ic-accent-line: #c7d2fe;  --ic-accent-tint: rgba(79,70,229,.10);
	--ic-emerald: #059669; --ic-em-ink: #065f46;   --ic-em-soft: #ecfdf5;     --ic-em-line: #a7f3d0;     --ic-em-marker: #6ee7b7;
	--ic-rose: #e11d48;    --ic-rose-ink: #9f1239; --ic-rose-soft: #fff1f2;   --ic-rose-line: #fecdd3;
	--ic-amber: #d97706;   --ic-amber-ink: #92400e; --ic-amber-soft: #fffbeb; --ic-amber-line: #fde68a;
	--ic-sky: #0284c7;     --ic-sky-ink: #075985;  --ic-sky-soft: #f0f9ff;    --ic-sky-line: #bae6fd;
}
:root[data-theme="dark"] {
	color-scheme: dark;
	--ic-bg: #17171b;
	--ic-card: #202027;
	--ic-panel: #191920;
	--ic-ink: #f1f2f6;
	--ic-text: #e2e4ea;
	--ic-text-2: #b9bdcc;
	--ic-lead: #c9cdee;
	--ic-muted: #8f95a6;
	--ic-rule: rgba(255,255,255,.10);
	--ic-rule-2: rgba(255,255,255,.12);
	--ic-chip: rgba(255,255,255,.07);
	--ic-shadow-card: 0 3px 4px 0 rgba(0,0,0,.35), 0 1px 8px 0 rgba(0,0,0,.30);
	--ic-shadow-hover: 0 18px 40px -22px rgba(0,0,0,.8), 0 2px 8px rgba(0,0,0,.3);
	--ic-shadow-pop: 0 18px 40px -22px rgba(0,0,0,.85), 0 2px 8px rgba(0,0,0,.35);
	--ic-kicker-bg: #3730a3;
	--ic-hero-bg: #1d1b34;
	--ic-hero-dots: rgba(255,255,255,.07);
	--ic-blob-opacity: .16;
	--ic-accent: #818cf8;  --ic-accent-2: #a5b4fc;  --ic-accent-ink: #c7d2fe;  --ic-accent-soft: rgba(99,102,241,.16);  --ic-accent-line: rgba(129,140,248,.38); --ic-accent-tint: rgba(129,140,248,.14);
	--ic-emerald: #34d399; --ic-em-ink: #6ee7b7;   --ic-em-soft: rgba(16,185,129,.14);   --ic-em-line: rgba(52,211,153,.38);   --ic-em-marker: rgba(110,231,183,.45);
	--ic-rose: #fb7185;    --ic-rose-ink: #fda4af; --ic-rose-soft: rgba(244,63,94,.14);  --ic-rose-line: rgba(251,113,133,.38);
	--ic-amber: #fbbf24;   --ic-amber-ink: #fcd34d; --ic-amber-soft: rgba(245,158,11,.14); --ic-amber-line: rgba(251,191,36,.38);
	--ic-sky: #38bdf8;     --ic-sky-ink: #7dd3fc;  --ic-sky-soft: rgba(14,165,233,.14);  --ic-sky-line: rgba(56,189,248,.38);
}
/* The page itself follows the tokens; the appearance settings' inline colour
   on <body> is the legacy path and yields to this. Devlands keeps its own. */
body:not(.devlands) { background-color: var(--ic-bg) !important; color: var(--ic-text); }
:root[data-theme="dark"] .hero-card { color: var(--ic-ink); }
:root[data-theme="dark"] .hero-card h1 em::after, :root[data-theme="dark"] .item-body-title em::after { background: var(--ic-em-marker); }
:root[data-theme="dark"] .hero-card { background-image: radial-gradient(var(--ic-hero-dots) 1px, transparent 1.6px); }
:root[data-theme="dark"] .hero-card .hero-kicker { background: var(--ic-kicker-bg); }

/* All */
html, body {
	height: 100%;
}
/* body is only as tall as the window, so past the first screen the page shows
   html's background: give it the page's own (git-sim's viewer stylesheet, on
   pages with a graph, would paint it grey). Devlands has no data-theme. */
html[data-theme] {
	background-color: var(--ic-bg) !important;
}

/* The footer sits at the bottom of a short page: main is at least as tall as
   the window less the footer. (This replaces a negative bottom margin that
   pulled the footer over the end of any page that changed main's padding.) */
main {
	min-height: calc(100% - 183px);
	height: auto;
	margin: 0 auto;
	padding: 0;
	overflow-x: clip;
}

main a:not(.post-link):not(.no-highlight) {
	color: #039be5 !important;
	font-weight: 500 !important;
}

main a:not(.no-highlight):hover {
	color: #f1571c !important;
    text-decoration: underline;
}

main .block-10 a:not(.no-highlight):hover {
    color: #ff639a !important;
    cursor: url(/p/https/initialcommit.com/img/devlands/cursor_hand.webp) 15 7, auto !important;
}

main a.no-highlight:hover {
	color: transparent !important;
}

#amazon-affiliate-header {
    margin: 20px 8%;
    text-align: center;
}

/* Modal */
.modal-open {
	overflow-y: auto !important;
}

.modal.babygit .modal-header, .modal.askadev .modal-header {
	border-bottom: 2px solid #f1571c !important;
}

.modal.ce .modal-header {
	border-bottom: 2px solid #3287c8 !important;
}

.modal-body {
	padding-left: 0 !important;
    padding-right: 0 !important;
}

.modal-title {
	text-align: center;
	font-weight: 500;
}

.modal-content {
    border-radius: 10px !important;
}

.modal.babygit .modal-content, .modal.askadev .modal-content {
	border: solid 2px #f1571c !important;
}

.modal.ce .modal-content {
	border: solid 2px #3287c8 !important;
}

.modal.devlands-domain .modal-inner {
    background: linear-gradient(to bottom, #9b9bb3, #353748);
}

.modal.devlands-domain .modal-content {
    background-color: white !important;
    border-radius: 40px !important;
}

.modal.devlands .modal-content {
    border: 25px solid transparent;
    border-width: 25px;
    border-image: url(/p/https/initialcommit.com/img/initialcommit/tutorial_popup.webp) 60 round;
}

.modal.devlands button.close, .modal.devlands button.close:hover {
    color: #1e7b21 !important;
    cursor: url(/p/https/initialcommit.com/img/devlands/cursor_hand.webp) 15 7, auto !important;
}

.modal.devlands a.dropdown-item {
    cursor: url(/p/https/initialcommit.com/img/devlands/cursor_hand.webp) 15 7, auto !important;
}

@media (min-width: 576px) {
    .modal.devlands .modal-dialog {
        max-width: 550px !important;
    }
}

button.close {
	opacity: 0.8;
	text-shadow: none;
}

.modal.babygit button.close, .modal.askadev button.close {
	color: #f1571c;
}

.modal.ce button.close {
	color: #3287c8;
}

button.close:hover {
	color: white;
}

#emailCaptureForm {
	text-align: center;
}

#emailCaptureForm3 {
	width: 75%;
    margin: 0 auto;
}

.emailCaptureFormDiv1 {
	display: inline-block;
    width: 50%;
    vertical-align: middle;
}

.emailCaptureFormDiv2 {
	display: inline-block;
    width: 30%;
    margin-left: 5%;
    vertical-align: middle;
}

#emailCaptureSubmit, #emailCaptureSubmit2, #emailCaptureSubmit3, #emailCaptureSubmit4, #emailCaptureSubmit5, #emailCaptureSubmit6 {
    color: white;
    padding-left: 7px;
    padding-right: 7px;
}

.modal.babygit #emailCaptureSubmit,
#emailCaptureSubmit2,
#emailCaptureSubmit3,
.decoding-git-guidebook-for-developers #emailCaptureSubmit4,
#emailCaptureSubmit5 {
	background-color: #f1571c;
    border-color: #f1571c;
}

.modal.ce #emailCaptureSubmit,
.modal.ce #emailCaptureSubmit2,
.coding-essentials-guidebook-for-developers #emailCaptureSubmit4 {
	background-color: #3287c8;
    border-color: #3287c8;
}

.modal.devlands #emailCaptureSubmit,
.modal.devlands #emailCaptureSubmit2,
.modal.devlands #emailCaptureSubmit6,
.devlands #emailCaptureSubmit2,
.devlands #emailCaptureSubmit4 {
    background-color: #1e7b21;
    border-color: #1e7b21;
    cursor: url(/p/https/initialcommit.com/img/devlands/cursor_hand.webp) 15 7, auto !important;
}

.modal.babygit #emailCaptureSubmit:hover,
#emailCaptureSubmit2:hover,
#emailCaptureSubmit3:hover,
.decoding-git-guidebook-for-developers #emailCaptureSubmit4:hover,
#emailCaptureSubmit5:hover {
	background-color: #d43c02;
    border-color: #d43c02;
}

.modal.ce #emailCaptureSubmit:hover,
.modal.ce #emailCaptureSubmit2:hover,
.coding-essentials-guidebook-for-developers #emailCaptureSubmit4:hover {
	background-color: #2972aa;
    border-color: #2972aa;
}

.modal.devlands #emailCaptureSubmit:hover,
.modal.devlands #emailCaptureSubmit2:hover,
.modal.devlands #emailCaptureSubmit6:hover,
.devlands #emailCaptureSubmit2:hover,
.devlands #emailCaptureSubmit4:hover {
    background-color: #004103;
    border-color: #004103;
    cursor: url(/p/https/initialcommit.com/img/devlands/cursor_hand.webp) 15 7, auto !important;
}

.modal.babygit #emailCaptureSubmit:focus,
.modal.babygit #emailCaptureSubmit:active,
#emailCaptureSubmit2:focus,
#emailCaptureSubmit2:active,
#emailCaptureSubmit3:focus,
#emailCaptureSubmit3:active,
.decoding-git-guidebook-for-developers #emailCaptureSubmit4:focus,
.decoding-git-guidebook-for-developers #emailCaptureSubmit4:active,
#emailCaptureSubmit5:focus,
#emailCaptureSubmit5:active {
	box-shadow: 0 0 0 0.2rem rgba(212, 60, 2, 0.5) !important;
}

.modal.ce #emailCaptureSubmit:focus,
.modal.ce #emailCaptureSubmit:active,
.modal.ce #emailCaptureSubmit2:focus,
.modal.ce #emailCaptureSubmit2:active,
.coding-essentials-guidebook-for-developers #emailCaptureSubmit4:focus
.coding-essentials-guidebook-for-developers #emailCaptureSubmit4:active {
	box-shadow: 0 0 0 0.2rem rgba(41, 114, 170, 0.5) !important;
}

.modal.devlands #emailCaptureSubmit:focus,
.modal.devlands #emailCaptureSubmit:active,
.modal.devlands #emailCaptureSubmit2:focus,
.modal.devlands #emailCaptureSubmit2:active,
.modal.devlands #emailCaptureSubmit6:focus,
.modal.devlands #emailCaptureSubmit6:active,
.devlands #emailCaptureSubmit4:focus,
.devlands #emailCaptureSubmit4:active {
    box-shadow: 0 0 0 0.2rem rgba(0, 65, 3, 0.5) !important;
}

#emailCaptureClose {
	float: right;
}

#email, #interest, #bookFormat {
	font-size: 14px;
	padding-right: 5px;
    padding-left: 10px;
}

.modal.babygit #email:focus, .modal.askadev #email:focus {
	border-color: rgba(212, 60, 2, 0.5);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(212, 60, 2, 0.5);
}

.modal.ce #email:focus {
	border-color: rgba(41, 114, 170, 0.5);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(41, 114, 170, 0.5);
}

.input-group-append button {
	border-top-right-radius: 0.2rem !important;
    border-bottom-right-radius: 0.2rem !important;
}

#emailCaptureConfirmation, #askadevEmailCaptureConfirmation, #emailCaptureConfirmation4, #emailCaptureConfirmation5 {
	display: none;
	margin-top: 10px;
    color: #029402;
}

#interest, #bookFormat {
    pointer-events: none;
}

#interest:focus, #bookFormat:focus {
    border: none;
    box-shadow: none;
}

.modal.babygit .dropdown-toggle, .decoding-git-guidebook-for-developers .dropdown-toggle {
	border-color: #f1571c !important;
    color: #f1571c !important;
}

.modal.ce .dropdown-toggle, .coding-essentials-guidebook-for-developers .dropdown-toggle {
	border-color: #3287c8 !important;
    color: #3287c8 !important;
}

.modal.devlands .dropdown-toggle, .devlands .dropdown-toggle {
    border-color: #1e7b21 !important;
    color: #1e7b21 !important;
    cursor: url(/p/https/initialcommit.com/img/devlands/cursor_hand.webp) 15 7, auto !important;
}

.modal.babygit .dropdown-toggle:hover, .modal.babygit .dropdown-toggle:active, .modal.babygit .show > .dropdown-toggle, .modal.askadev .dropdown-toggle:hover, .decoding-git-guidebook-for-developers .dropdown-toggle:hover {
	color: white !important;
	background-color: #f1571c !important;
}

.modal.ce .dropdown-toggle:hover, .modal.ce .dropdown-toggle:active, .modal.ce .show > .dropdown-toggle, .coding-essentials-guidebook-for-developers .dropdown-toggle:hover {
	color: white !important;
	background-color: #3287c8 !important;
}

.modal.devlands .dropdown-toggle:hover, .modal.devlands .dropdown-toggle:active, .modal.devlands .show > .dropdown-toggle, .devlands .dropdown-toggle:hover {
    color: white !important;
    background-color: #1e7b21 !important;
}

.modal.babygit .dropdown-toggle:focus, .modal.askadev .dropdown-toggle:focus, .decoding-git-guidebook-for-developers .dropdown-toggle:focus {
	box-shadow: 0 0 0 0.2rem rgba(212, 60, 2, 0.5) !important;
}

.modal.ce .dropdown-toggle:focus, .coding-essentials-guidebook-for-developers .dropdown-toggle:focus {
	box-shadow: 0 0 0 0.2rem rgba(41, 114, 170, 0.5) !important;
}

.modal.devlands .dropdown-toggle:focus, .devlands .dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 65, 3, 0.5) !important;
}

.modal.babygit .dropdown-item:hover, .modal.babygit .dropdown-item:active, .modal.babygit .dropdown-item:focus, .modal.askadev .dropdown-item:hover, .decoding-git-guidebook-for-developers .dropdown-item:hover {
	background-color: #f1571c !important;
	color: white !important;
}

.modal.ce .dropdown-item:hover, .modal.ce .dropdown-item:active, .modal.ce .dropdown-item:focus, .coding-essentials-guidebook-for-developers .dropdown-item:hover {
	background-color: #3287c8 !important;
	color: white !important;
}

.modal.devlands .dropdown-item:hover, .modal.devlands .dropdown-item:active, .modal.devlands .dropdown-item:focus, .devlands .dropdown-item:hover {
    background-color: #1e7b21 !important;
    color: white !important;
}

.orange {
	color: #f1571c;
}

.blue {
	color: #3287c8;
}

.green {
    color: #1e7b21;
}

.pink {
    color: rgb(254, 80, 118);
}

.front-cover {
	width: 100%;
	display: block;
}

.modal.babygit .front-cover {
	content:url("/p/https/initialcommit.com/img/initialcommit/dg-half-cover.png");
}

.modal.ce .front-cover {
	content:url("/p/https/initialcommit.com/img/initialcommit/ce-half-cover.png");
}

.modal.askadev .front-cover {
	content:url("/p/https/initialcommit.com/img/initialcommit/dg-half-cover.png");
}

.modal.devlands .front-cover {
    content:url("/p/https/initialcommit.com/img/initialcommit/git_branching_commit_history.webp");
}

.readonly {
	background-color: #e4e4e4;
}

.material-icons {
    font-family: 'Material Icons';
    font-style: normal;
    font-size: 24px;
    vertical-align:middle;
    display: inline-block;
    vertical-align: text-bottom;
    width: 24px;
    height: 24px;
}

@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: local('Material Icons'), local('MaterialIcons-Regular'),
		url("/p/https/fonts.gstatic.com/s/materialicons/v18/2fcrYFNaTjcS6g4U3t-Y5RV6cRhDpPC5P4GCEJpqGoc.woff")
		format('woff');
	font-display: swap;
}

.githubBtn:hover {
	color: black !important;
}

.linkedinBtn:hover {
	color: #0077b5 !important;
}

.instagramBtn:hover {
	color: #dd2a7b !important;
}

.facebookBtn:hover {
	color: #3b5998 !important;
}

.redditBtn:hover {
	color: #FF5700 !important;
}

.twitterBtn:hover {
	color: #00acee !important;
}

.emailBtn:hover {
	color: #f1571c !important;
}

.devlands .githubBtn, .devlands .githubBtn:hover {
    color: black !important;
    cursor: url(/p/https/initialcommit.com/img/devlands/cursor_hand.webp) 15 7, auto !important;
}

.devlands .linkedinBtn, .devlands .linkedinBtn:hover {
    color: #0077b5 !important;
    cursor: url(/p/https/initialcommit.com/img/devlands/cursor_hand.webp) 15 7, auto !important;
}

.devlands .instagramBtn, .devlands .instagramBtn:hover {
    color: #dd2a7b !important;
    cursor: url(/p/https/initialcommit.com/img/devlands/cursor_hand.webp) 15 7, auto !important;
}

.devlands .facebookBtn, .devlands .facebookBtn:hover {
    color: #3b5998 !important;
    cursor: url(/p/https/initialcommit.com/img/devlands/cursor_hand.webp) 15 7, auto !important;
}

.devlands .redditBtn, .devlands .redditBtn:hover {
    color: #FF5700 !important;
    cursor: url(/p/https/initialcommit.com/img/devlands/cursor_hand.webp) 15 7, auto !important;
}

.devlands .twitterBtn, .devlands .twitterBtn:hover {
    color: #00acee !important;
    cursor: url(/p/https/initialcommit.com/img/devlands/cursor_hand.webp) 15 7, auto !important;
}

.devlands .emailBtn, .devlands .emailBtn:hover {
    color: #ff639a !important;
    cursor: url(/p/https/initialcommit.com/img/devlands/cursor_hand.webp) 15 7, auto !important;
}

/* Nav */
nav {
	box-shadow: 0 1px 0 rgba(30,27,75,.08), 0 10px 30px -18px rgba(30,27,75,.35);
	z-index: 3 !important;
}

.navbar {
	height: 64px;
	padding: 0 !important;
}

.navbar a:not(.rss-link) {
	margin: 0 10px;
	font-size: 14px;
}

.navbar a:hover { text-decoration: none; }

.navbar-brand {
	position: absolute;
    margin-left: 30px !important;
}

.navbar-toggler {
	outline: none !important;
	padding: .75rem .75rem !important;
	margin-left: 20px;
}

nav.devlands {
    box-shadow: none !important;
    z-index: 5 !important;
    pointer-events: none;
}

nav.devlands .navbar-brand {
    display: none !important;
}

nav.devlands .container {
    position: absolute;
    max-width: fit-content;
    left: 25vw;
    transform: translateX(-50%);
}

nav.devlands .navbar-collapse:not(.show) {
    display: initial;
}

nav.devlands #light-dark-toggle {
    display: none !important;
}

nav.devlands .rss {
    display: none !important;
}

nav.devlands .nav-link {
    color: black !important;
    pointer-events: all !important;
    font-size: 1.75em;
    padding-top: 75px;
}

nav.devlands a:not(.rss-link) {
    margin: 0 20px;
}

nav.devlands a.nav-link:hover {
    color: #ff639a !important;
    background-color: transparent !important;
    cursor: url(/p/https/initialcommit.com/img/devlands/cursor_hand.webp) 15 7, auto !important;
}

/* The two icon buttons at the nav's right edge: the dark / light toggle (a
   moon in light mode, a sun in dark mode) and the RSS menu. Inline SVG drawn
   in the current text colour; a soft indigo tile on hover, the icon tipping. */
.navbar:where(:not(.devlands)) .icon-btn { width: 38px; height: 38px; border-radius: 12px; display: inline-grid; place-items: center; border: 0; background: transparent; padding: 0; cursor: pointer; color: inherit; transition: background .15s, color .15s, transform .15s; }
.navbar:where(:not(.devlands)) .icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.navbar:where(:not(.devlands)) .icon-btn svg .fill { fill: currentColor; stroke: none; }
.navbar:where(:not(.devlands)) .icon-btn:hover, .navbar:where(:not(.devlands)) .icon-btn:focus-visible, .navbar:where(:not(.devlands)) .show > .icon-btn { background: var(--ic-accent-tint); color: var(--ic-accent) !important; outline: none; }
.navbar:where(:not(.devlands)) .icon-btn:hover svg { transform: rotate(-15deg) scale(1.1); }
.navbar:where(:not(.devlands)) .icon-btn:active svg { transform: scale(.92); }
.navbar:where(:not(.devlands)) .mode-toggle svg .twinkle { transform-box: fill-box; transform-origin: center; animation: twinkle 2.4s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
#light-dark-toggle { position: absolute; right: 72px; top: 13px; }
.rss { position: absolute; right: 20px; top: 13px; text-decoration: none !important; }
.rss .rss-btn::after { display: none; }
.navbar:where(:not(.devlands)) .rss .dropdown-menu { margin-top: 10px; min-width: 160px; padding: 6px; border: 1px solid var(--ic-rule); border-radius: 14px; box-shadow: var(--ic-shadow-pop); }
.navbar:where(:not(.devlands)) .rss .dropdown-item { margin: 0 !important; padding: 9px 12px !important; border-radius: 9px; font-size: 14px !important; font-weight: 600; color: var(--ic-ink) !important; }
.navbar:where(:not(.devlands)) .rss .dropdown-item:hover, .navbar:where(:not(.devlands)) .rss .dropdown-item:focus { background: var(--ic-accent-soft) !important; color: var(--ic-accent) !important; }
@media (prefers-reduced-motion: reduce) { .navbar:where(:not(.devlands)) .icon-btn svg, .navbar:where(:not(.devlands)) .mode-toggle svg .twinkle { transition: none; animation: none; } .navbar:where(:not(.devlands)) .icon-btn:hover svg { transform: none; } }

/* Toast */
#toaster {
	position: fixed;
	top: 65px;
	right: 5px;
	z-index: 3;
}

.toast-header {
	color: #777;
}

.toast-header img {
    width: 15px;
}

.toast-header div {
    padding-right: 75px;
    font-weight: 600;
    color: black;
}

.toast-header button.close {
	color: black;
}

.toast-header button.close:hover {
	color: #f1571c;
}

.toast-body {
	background-color: rgba(255,255,255,.9);
	padding: .75rem;
    font-weight: 500;
    font-size: 12px;
}

/* Code */

pre[class*="language-"], code[class*="language-"], .token.operator {
    background: none;
    text-shadow: none;
}

span.token.parameter, span.token.property-access, span.token.this,
span.token.namespace, span.token.package, span.token.generics,
span.token.maybe-class-name {
    color: black;
}

/* Overlay */

#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.75);
  z-index: 3;
  cursor: pointer;
}

/* Footer */
footer {
	margin-top: 50px;
    padding-top: 20px;
    text-align: center;
    position: relative;
    z-index: 1;
}

footer a:hover {
	text-decoration: none !important;
}

footer.devlands a, footer.devlands div {
    color: black !important;
}

footer.devlands a:hover {
    cursor: url(/p/https/initialcommit.com/img/devlands/cursor_hand.webp) 15 7, auto !important;
    color: #ff639a !important;
    background-color: transparent !important;
}

.footer-copyright {
	font-weight: lighter;
}

#privacy-policy-link:hover {
	color: #6366f1 !important
}

footer.devlands #privacy-policy-link:hover {
    color: #ff639a !important
}

/* Animation */
.flash {
	animation: flash 1.5s infinite;
}

@keyframes flash {
	0% { background-color: #f1571c; box-shadow: 0 0 0 10px #f1571c; }
    50% { background-color: black; box-shadow: none; }
    100% { background-color: #f1571c; box-shadow: 0 0 0 10px #f1571c; }
}

.flash-border {
	animation: flash-border 1.5s infinite;
}

@keyframes flash-border {
	0% { box-shadow: 0 0 0 10px #f1571c; }
    50% { box-shadow: none; }
    100% { box-shadow: 0 0 0 10px #f1571c; }
}

/* Misc */
button:focus {
	outline: none !important;
}

/* Ads */

.ad-title {
	padding: 0 !important;
    margin: 5px 0 0 5px !important;
    color: #777 !important;
    font-size: 12px;
}

#topright-sidebar-ad {
    width: 25%;
    margin: 0 15px;
    float: right;
}

.right-sidebar-ad-slot:first-of-type {
	margin: 5px;
}

.devlands.contact .right-sidebar-ad-slot:first-of-type {
    display: none;
}

.right-sidebar-ad-slot:not(:first-of-type) {
	margin: 15px 5px 15px 5px;
}

.right-sidebar-ad-slot.ad {
    border-radius: .25rem;
}

#rfsn_img_34057 img {
	width: 100%;
}

/* Blocks */

.block-5 .block-image, .block-6 video {
	width: 100%;
	height: auto;
	border-radius: 3px;
}

@media only screen and (max-width: 2499px) {
    nav.devlands .container {
        left: 17.5vw;
    }
    
    nav.devlands .nav-link {
    font-size: 1.25em;
    padding-top: 50px;
    }
}

@media only screen and (max-width: 1499px) {
    nav.devlands .container {
        left: 17.5vw;
        max-width: max-content;
    }
    
    nav.devlands .nav-link {
        font-size: 1em;
        padding-top: 15px;
    }
    
    nav.devlands a:not(.rss-link) {
        margin: 0;
    }
    
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: .75rem;
        padding-left: .75rem;
    }
}

/* Medium and small screens */
@media only screen and (max-width: 991px) {
    
    /* Nav */
    .navbar-brand {
        margin-left: 90px !important;
    }
    
    .navbar .container { max-width: initial; }
    
    /* Toaster */
    #toaster {
		top: 0px;
	    right: 0px;
	}
    
}


/* ---- the hero card: every page's header ------------------------------------ */
/* A sunny card with sticker-ish badges rather than a dark photo slab: pastel blobs
   on a dotted ground, a dark monospace kicker, a heavy headline with one word
   highlighted in green (the script in fragments/general picks the word with "git"
   in it when there is one, else the last word). The learn pages share the card
   and add their own bits (see css/learn/learn.css). */
.hero-card { position: relative; overflow: hidden; margin: 0 auto 36px; padding: 44px 52px; border-radius: 32px; color: var(--ic-ink); background: var(--ic-hero-bg); background-image: radial-gradient(var(--ic-rule) 1px, transparent 1.6px); background-size: 22px 22px; box-shadow: 0 30px 60px -28px rgba(30,27,75,.35), 0 2px 8px var(--ic-chip); }
.hero-card > * { position: relative; z-index: 1; }
.hero-kicker { display: inline-block; font: 700 12px/1 sans-serif; font-family: inherit; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: var(--ic-kicker-bg); border-radius: 999px; padding: 8px 14px; margin: 0 0 18px; transform: rotate(-2deg); box-shadow: 0 6px 14px -6px rgba(30,27,75,.5); }
.hero-card h1 { font-size: 46px; line-height: 1.05; margin: 0 0 16px; color: var(--ic-ink); letter-spacing: -.025em; font-weight: 700; }
.hero-card h1 em { font-style: normal; position: relative; display: inline-block; color: var(--ic-em-ink); }
.hero-card h1 em::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: 4px; height: 14px; background: var(--ic-em-marker); z-index: -1; border-radius: 6px; transform: rotate(-1.5deg); }
.hero-card .lead { font-size: 19px; line-height: 1.6; margin: 0 0 14px; color: var(--ic-lead); opacity: 1; max-width: 860px; }
.hero-card .lead:last-child { margin-bottom: 0; }
/* every hero's tagline reads like the blog index's: Bootstrap's .lead is weight 300,
   and some pages had shrunk or faded theirs */
.hero-card .lead { font-size: 19px !important; font-weight: 400 !important; line-height: 1.6 !important; color: var(--ic-lead) !important; opacity: 1 !important; }
/* and a hero's small print is still meant to be read */
.hero-card p.fine { font-size: 15px !important; color: var(--ic-text-2) !important; opacity: 1 !important; }
.hero-card .fine { color: var(--ic-muted); opacity: 1; }
.hero-card a { color: var(--ic-accent); }
@media (max-width: 900px) { .hero-card { padding: 34px 26px; border-radius: 24px; } .hero-card h1 { font-size: 36px; } }

/* On the rest of the site the card sits in the page column under the fixed navbar.
   The old banner styling (a 55px centred capitalised h1, white text) is overridden
   here, hence the !important. */
.site-hero { width: min(1160px, calc(100% - 32px)); margin: 0 auto 36px; text-align: left; }
/* the card's gap under the navbar: padding, since a margin would collapse into the page's own */
main.page-content { padding-top: 24px; }
.site-hero h1 { font-size: 46px !important; font-weight: 700 !important; line-height: 1.05 !important; letter-spacing: -.025em !important; text-align: left !important; text-transform: none !important; margin: 0 0 16px !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--ic-ink) !important; }
.site-hero h1:last-child { margin-bottom: 0 !important; }
.site-hero .lead { font-size: 19px !important; font-weight: 400 !important; line-height: 1.6 !important; text-align: left !important; text-transform: none !important; margin: 0 !important; color: var(--ic-lead) !important; }
.site-hero .hero-kicker { font: 700 12px/1 sans-serif; font-family: inherit !important; letter-spacing: .16em !important; text-transform: uppercase !important; margin: 0 0 18px !important; padding: 8px 14px !important; color: #fff !important; text-align: left !important; }
.post-hero { margin-top: 0; }
@media (max-width: 900px) { .site-hero h1 { font-size: 36px !important; } .site-hero { margin-top: 16px; } }


/* ---- the brand: a commit-graph tile and the wordmark ------------------------ */
/* The mark is inline SVG in the nav (fragments/general) and the favicon
   (static/js/brand): the lessons hero in miniature, a cream tile with pastel blobs and a heavy navy IC. The
   wordmark takes the nav's text colour, "Initial" the site's green. */
.navbar-brand.brand { display: inline-flex !important; align-items: center; gap: 10px; text-decoration: none !important; }
.navbar-brand.brand .brand-mark { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 4px 10px rgba(30,27,75,.22)); transition: transform .2s; }
.navbar-brand.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.06); }
.navbar-brand.brand .brand-word { font: 700 19px/1 sans-serif; font-family: inherit; letter-spacing: -.02em; color: inherit; white-space: nowrap; }
.navbar-brand.brand .brand-word em { font-style: normal; color: #10b981; }
/* The wordmark keeps its colour on hover (the nav-wide orange link hover is not for the brand); the mark's tilt is the feedback. */
.navbar:where(:not(.devlands)) .navbar-brand.brand:hover, .navbar:where(:not(.devlands)) .navbar-brand.brand:focus { color: inherit !important; }
/* With the burger showing, the brand sits right after it (the legacy rule put it
   90px out, absolutely positioned) and keeps its wordmark; the menu's container
   takes the space between the brand and the icon buttons on the right. */
@media (max-width: 991px) {
	.navbar:where(:not(.devlands)) .navbar-brand.brand { position: absolute !important; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0 !important; padding: 0; gap: 8px; }
	.navbar-brand.brand .brand-word { display: inline; font-size: 17px; }
	.navbar:where(:not(.devlands)) > .container { flex: 1 1 0; width: auto; min-width: 0; }
	/* the two icon buttons: a tight pair at the right edge, mirroring the burger's 14px on the left */
	.navbar:where(:not(.devlands)) .rss { right: 14px; }
	.navbar:where(:not(.devlands)) #light-dark-toggle { right: 58px; }
}
@media (max-width: 340px) { .navbar-brand.brand .brand-word { display: none; } }
/* on a narrow desktop the centred links reach the brand; the tile alone marks the site there */
@media (min-width: 992px) and (max-width: 1240px) { .navbar-brand.brand .brand-word { display: none; } }
/* Hovering the brand: the tile tips and lifts while its four blobs drift
   toward their corners, the IC glyph gives a little hop, a marker stroke draws
   itself under "Initial" and "Commit" takes the indigo. Nothing moves for
   people who asked for reduced motion. */
.navbar-brand.brand .brand-mark { transition: transform .35s cubic-bezier(.34,1.56,.64,1), filter .3s; }
.navbar-brand.brand .brand-mark g > circle, .navbar-brand.brand .brand-mark path { transform-box: fill-box; transform-origin: center; transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.navbar-brand.brand:hover .brand-mark, .navbar-brand.brand:focus-visible .brand-mark { transform: rotate(-8deg) scale(1.12) translateY(-1px); filter: drop-shadow(0 8px 16px rgba(30,27,75,.32)); }
.navbar-brand.brand:hover .brand-mark g > circle:nth-of-type(1) { transform: translate(-3px, -3px) scale(1.2); }
.navbar-brand.brand:hover .brand-mark g > circle:nth-of-type(2) { transform: translate(3px, -3px) scale(1.15); }
.navbar-brand.brand:hover .brand-mark g > circle:nth-of-type(3) { transform: translate(3px, 3px) scale(1.2); }
.navbar-brand.brand:hover .brand-mark g > circle:nth-of-type(4) { transform: translate(-3px, 3px) scale(1.15); }
.navbar-brand.brand:hover .brand-mark path { animation: brand-hop .6s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes brand-hop { 0% { transform: none; } 45% { transform: translateY(-3px) rotate(8deg); } 100% { transform: none; } }
.navbar-brand.brand .brand-word { transition: color .2s; }
.navbar-brand.brand .brand-word em { position: relative; z-index: 0; display: inline-block; transition: transform .35s cubic-bezier(.34,1.56,.64,1), color .2s; }
.navbar-brand.brand .brand-word em::after { content: ""; position: absolute; left: -3px; right: -3px; bottom: 0; height: 7px; border-radius: 4px; background: var(--ic-em-marker); z-index: -1; transform: scaleX(0) rotate(-2deg); transform-origin: left center; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.navbar-brand.brand:hover .brand-word em { color: var(--ic-em-ink); transform: translateY(-2px) rotate(-3deg); }
.navbar-brand.brand:hover .brand-word em::after { transform: scaleX(1) rotate(-2deg); }
.navbar:where(:not(.devlands)) .navbar-brand.brand:hover .brand-word, .navbar:where(:not(.devlands)) .navbar-brand.brand:focus .brand-word { color: var(--ic-accent-2); }
@media (prefers-reduced-motion: reduce) {
	.navbar-brand.brand .brand-mark, .navbar-brand.brand .brand-mark g > circle, .navbar-brand.brand .brand-word em, .navbar-brand.brand .brand-word em::after { transition: none; }
	.navbar-brand.brand:hover .brand-mark, .navbar-brand.brand:hover .brand-mark g > circle, .navbar-brand.brand:hover .brand-word em { transform: none; }
	.navbar-brand.brand:hover .brand-mark path { animation: none; }
}


/* ---- the nav bar's links and menus ------------------------------------------ */
/* Top-level links are small uppercase pills: an indigo tint on hover, an indigo
   dot under the current section. The Learn menu and the phone panel are rounded
   cards like the RSS menu, their items in sentence case. */
.navbar:where(:not(.devlands)) .navbar-nav { align-items: center; gap: 2px; }
.navbar:where(:not(.devlands)) .navbar-nav > a.nav-link, .navbar:where(:not(.devlands)) .navbar-nav .nav-link.dropdown > a { position: relative; margin: 0 2px !important; padding: 9px 13px !important; border-radius: 999px; font-size: 13.5px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: .06em; text-decoration: none !important; transition: background .15s, color .15s; }
.navbar:where(:not(.devlands)) .navbar-nav > a.nav-link:hover, .navbar:where(:not(.devlands)) .navbar-nav .nav-link.dropdown > a:hover, .navbar:where(:not(.devlands)) .navbar-nav .nav-link.dropdown.show > a { color: var(--ic-accent-2) !important; }

.navbar:where(:not(.devlands)) .navbar-nav .nav-link.dropdown { padding: 0 !important; margin: 0 !important; }
/* the Learn caret: a small chevron that turns when the menu is open */
.navbar:where(:not(.devlands)) .navbar-nav .dropdown-toggle::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 2px 7px; border: 0; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg); vertical-align: 1px; transition: transform .2s; }
.navbar:where(:not(.devlands)) .navbar-nav .dropdown.show .dropdown-toggle::after { transform: rotate(-135deg) translateY(-2px); }
/* the Learn menu */
.learn-menu { margin-top: 12px; min-width: 260px; max-height: calc(100vh - 96px); overflow-y: auto; padding: 8px; border: 1px solid var(--ic-rule); border-radius: 16px; box-shadow: var(--ic-shadow-pop); }
.learn-menu .dropdown-header { padding: 10px 12px 6px; font: 700 11px/1 sans-serif; font-family: inherit; letter-spacing: .14em; text-transform: uppercase; color: var(--ic-muted); }
.learn-menu .dropdown-divider { margin: 6px 4px; border-color: var(--ic-rule); }
.learn-menu .dropdown-item { margin: 0 !important; padding: 9px 12px !important; border-radius: 9px; font-size: 14px !important; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ic-ink) !important; }
.learn-menu .dropdown-item:hover, .learn-menu .dropdown-item:focus { background: var(--ic-accent-soft) !important; color: var(--ic-accent) !important; }
/* the hamburger */
.navbar:where(:not(.devlands)) .navbar-toggler { border: 0; border-radius: 12px; padding: 6px !important; margin-left: 14px; transition: background .15s; }
.navbar:where(:not(.devlands)) .navbar-toggler:hover, .navbar:where(:not(.devlands)) .navbar-toggler[aria-expanded="true"] { background: var(--ic-accent-tint); }

/* the phone panel: a card under the bar */
@media only screen and (max-width: 991px) {
	.navbar:where(:not(.devlands)) .container { padding: 0 12px; }
	.navbar:where(:not(.devlands)) .container { position: static; }
	.navbar:where(:not(.devlands)) .navbar-collapse { position: absolute; top: 66px; left: 12px; right: 12px; margin: 0; padding: 8px; background: var(--ic-card); border: 1px solid var(--ic-rule); border-radius: 16px; box-shadow: var(--ic-shadow-pop); max-height: calc(100vh - 92px); overflow-y: auto; }
	.navbar:where(:not(.devlands)) .navbar-nav { align-items: stretch; gap: 2px; }
	.navbar:where(:not(.devlands)) .navbar-nav > a.nav-link, .navbar:where(:not(.devlands)) .navbar-nav .nav-link.dropdown > a { display: block; margin: 0 !important; padding: 12px 14px !important; border-radius: 10px; font-size: 14px !important; color: var(--ic-ink) !important; }
	.navbar:where(:not(.devlands)) .navbar-nav > a.nav-link:hover, .navbar:where(:not(.devlands)) .navbar-nav .nav-link.dropdown > a:hover, .navbar:where(:not(.devlands)) .navbar-nav .nav-link.dropdown.show > a { background: var(--ic-accent-soft); }
	/* on the phone the marker is a short bar at the row's left edge */
	.navbar:where(:not(.devlands)) .navbar-nav > a.nav-link::before, .navbar:where(:not(.devlands)) .navbar-nav .nav-link.dropdown > a::before { left: 0; right: auto; top: 10px; bottom: 10px; width: 4px; height: auto; border-radius: 2px; background: var(--ic-accent-2); transform: scaleY(0); transform-origin: center; }
	.navbar:where(:not(.devlands)) .navbar-nav > a.nav-link:hover::before, .navbar:where(:not(.devlands)) .navbar-nav .nav-link.dropdown > a:hover::before, .navbar:where(:not(.devlands)) .navbar-nav .nav-link.dropdown.show > a::before, .navbar:where(:not(.devlands)) .navbar-nav > a.nav-link.active::before, .navbar:where(:not(.devlands)) .navbar-nav .nav-link.dropdown > a.active::before { transform: scaleY(1); }
	.navbar:where(:not(.devlands)) .navbar-nav .nav-link.dropdown { display: block !important; }
	.navbar:where(:not(.devlands)) .navbar-nav .learn-menu { position: static !important; float: none; margin: 2px 0 6px; box-shadow: none; border: 0; border-left: 2px solid var(--ic-rule); border-radius: 0; padding: 4px 0 4px 10px; max-height: none; transform: none !important; }
}


/* ---- more life in the nav ------------------------------------------------- */
/* A pastel stripe along the bar's bottom edge; a marker stroke that draws itself
   under a link on hover and stays, yellow, under the current section; a
   hamburger that folds into a cross; the Learn menu on dotted paper in two
   columns, a pastel dot before each item. */
.navbar:where(:not(.devlands))::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: linear-gradient(90deg, #fde047 0 25%, var(--ic-em-line) 25% 50%, #c4b5fd 50% 75%, #fda4af 75%); opacity: .9; pointer-events: none; }
nav.devlands::after { display: none; }
.navbar:where(:not(.devlands)) .navbar-nav > a.nav-link, .navbar:where(:not(.devlands)) .navbar-nav .nav-link.dropdown > a { z-index: 0; }
.navbar:where(:not(.devlands)) .navbar-nav > a.nav-link::before, .navbar:where(:not(.devlands)) .navbar-nav .nav-link.dropdown > a::before { content: ""; position: absolute; left: 11px; right: 11px; bottom: 7px; height: 6px; border-radius: 3px; background: var(--ic-accent-line); z-index: -1; transform: scaleX(0) rotate(-1.5deg); transform-origin: left center; transition: transform .25s cubic-bezier(.22,1,.36,1), background .2s; }
.navbar:where(:not(.devlands)) .navbar-nav > a.nav-link:hover::before, .navbar:where(:not(.devlands)) .navbar-nav .nav-link.dropdown > a:hover::before, .navbar:where(:not(.devlands)) .navbar-nav .nav-link.dropdown.show > a::before { transform: scaleX(1) rotate(-1.5deg); }
.navbar:where(:not(.devlands)) .navbar-nav > a.nav-link.active::before, .navbar:where(:not(.devlands)) .navbar-nav .nav-link.dropdown > a.active::before { transform: scaleX(1) rotate(-1.5deg); background: #fde047; }
.navbar:where(:not(.devlands)) .navbar-nav > a.nav-link.active:hover::before, .navbar:where(:not(.devlands)) .navbar-nav .nav-link.dropdown > a.active:hover::before { background: var(--ic-accent-line); }
.navbar:where(:not(.devlands)) .navbar-nav .nav-link.dropdown > a::before { right: 24px; }
/* ten items (EXPLORE, LEARN and DEVELOP among them): tighter on laptop widths, so the row clears the logo and the buttons */
@media (min-width: 992px) and (max-width: 1365px) { .navbar:where(:not(.devlands)) .navbar-nav > a.nav-link, .navbar:where(:not(.devlands)) .navbar-nav .nav-link.dropdown > a { padding: 9px 9px !important; letter-spacing: .03em; } }
@media (min-width: 992px) and (max-width: 1100px) { .navbar:where(:not(.devlands)) .navbar-nav > a.nav-link, .navbar:where(:not(.devlands)) .navbar-nav .nav-link.dropdown > a { padding: 9px 7px !important; font-size: 12.5px !important; letter-spacing: .02em; } }
/* the hamburger */
.navbar:where(:not(.devlands)) .burger { display: grid; gap: 4.5px; width: 22px; padding: 4px 0; color: inherit; }
.navbar:where(:not(.devlands)) .burger i { display: block; height: 2.2px; border-radius: 2px; background: currentColor; transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .2s, width .3s; transform-origin: center; }
.navbar:where(:not(.devlands)) .burger i:nth-child(2) { width: 70%; }
.navbar:where(:not(.devlands)) .navbar-toggler:hover .burger i:nth-child(2) { width: 100%; }
.navbar:where(:not(.devlands)) .navbar-toggler[aria-expanded="true"] .burger { color: var(--ic-accent); }
.navbar:where(:not(.devlands)) .navbar-toggler[aria-expanded="true"] .burger i:nth-child(1) { transform: translateY(6.7px) rotate(45deg); }
.navbar:where(:not(.devlands)) .navbar-toggler[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; transform: scaleX(0); }
.navbar:where(:not(.devlands)) .navbar-toggler[aria-expanded="true"] .burger i:nth-child(3) { transform: translateY(-6.7px) rotate(-45deg); }
/* the Learn menu */
.learn-menu { display: none; grid-template-columns: repeat(2, minmax(200px, 1fr)); gap: 4px 14px; min-width: 520px; padding: 14px; border-radius: 20px; background-color: var(--ic-card); background-image: radial-gradient(rgba(30,27,75,.075) 1px, transparent 1.5px); background-size: 20px 20px; animation: menu-pop .22s cubic-bezier(.22,1,.36,1) both; }
.learn-menu.show { display: grid; }
/* Explore and Develop: one short list each */
.learn-menu.single { grid-template-columns: minmax(0, 1fr); min-width: 280px; }
/* Popper positions the menu with an inline transform, so the entrance animates opacity and margin only */
@keyframes menu-pop { from { margin-top: 2px; } to { margin-top: 12px; } }
.learn-menu .menu-col { min-width: 0; }
.learn-menu .menu-col.wide { grid-column: 1 / -1; padding-top: 6px; border-top: 1px dashed var(--ic-rule); }
.learn-menu .menu-col.wide .dropdown-item { display: inline-block; width: auto; margin: 0 4px 4px 0 !important; padding: 7px 12px 7px 10px !important; border: 1px solid var(--ic-rule); border-radius: 999px; background: var(--ic-card); font-size: 13px !important; }
.learn-menu .menu-col.wide .dropdown-item::before { display: none; }
.learn-menu .dropdown-header { display: inline-block; margin: 0 0 6px 6px; padding: 6px 10px; border-radius: 999px; background: var(--ic-kicker-bg); color: #fff; transform: rotate(-1.5deg); box-shadow: 0 6px 14px -6px rgba(30,27,75,.5); }
.learn-menu .dropdown-item { position: relative; padding-left: 30px !important; }
.learn-menu .dropdown-item::before { content: ""; position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--dot, #c4b5fd); transition: transform .2s cubic-bezier(.34,1.56,.64,1), background .2s; }
.learn-menu .dropdown-item:nth-child(4n+2)::before { --dot: #fde047; }
.learn-menu .dropdown-item:nth-child(4n+3)::before { --dot: var(--ic-em-line); }
.learn-menu .dropdown-item:nth-child(4n+4)::before { --dot: #fda4af; }
.learn-menu .dropdown-item:nth-child(4n+5)::before { --dot: var(--ic-sky-line); }
.learn-menu .dropdown-item:hover::before, .learn-menu .dropdown-item:focus::before { transform: scale(1.5); background: var(--ic-accent); }
.learn-menu .dropdown-item:hover, .learn-menu .dropdown-item:focus { background: var(--ic-card) !important; box-shadow: 0 8px 18px -12px rgba(30,27,75,.5); }
.learn-menu .menu-col.wide .dropdown-item:hover { background: var(--ic-accent-soft) !important; border-color: var(--ic-accent-line); }
@media only screen and (max-width: 991px) {
	.navbar:where(:not(.devlands))::after { bottom: 0; }
	.navbar:where(:not(.devlands)) .navbar-nav .learn-menu { display: none; min-width: 0; padding: 4px 0 4px 10px; background: transparent; animation: none; }
	.navbar:where(:not(.devlands)) .navbar-nav .learn-menu.show { display: block; }
	.navbar:where(:not(.devlands)) .navbar-nav .learn-menu .menu-col.wide { border-top: 0; padding-top: 0; }
	.navbar:where(:not(.devlands)) .navbar-nav .learn-menu .menu-col.wide .dropdown-item { display: block; width: auto; margin: 0 !important; padding: 9px 12px 9px 30px !important; border: 0; border-radius: 9px; background: transparent; font-size: 14px !important; }
	.navbar:where(:not(.devlands)) .navbar-nav .learn-menu .menu-col.wide .dropdown-item::before { display: block; }
	.navbar:where(:not(.devlands)) .navbar-nav .learn-menu .dropdown-header { margin-left: 0; }
	.navbar:where(:not(.devlands)) .navbar-nav .learn-menu .dropdown-item:hover, .navbar:where(:not(.devlands)) .navbar-nav .learn-menu .dropdown-item:focus { background: var(--ic-accent-soft) !important; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
	.navbar:where(:not(.devlands)) .navbar-nav .learn-menu { animation: none; }
	.navbar:where(:not(.devlands)) .navbar-nav > a.nav-link::before, .navbar:where(:not(.devlands)) .navbar-nav .nav-link.dropdown > a::before, .navbar:where(:not(.devlands)) .burger i, .navbar:where(:not(.devlands)) .navbar-nav .learn-menu .dropdown-item::before { transition: none; }
}


/* ---- the footer, in the nav's language ------------------------------------- */
/* The same pastel stripe along its top edge, the social icons on hover tiles
   that tip like the nav's buttons, the links as uppercase pills with the marker
   stroke on hover and a yellow one under the current section. */
footer:not(.devlands)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #fde047 0 25%, var(--ic-em-line) 25% 50%, #c4b5fd 50% 75%, #fda4af 75%); opacity: .9; }
footer:not(.devlands) { padding-top: 34px; }
footer:not(.devlands) .container > .row.justify-content-center:not(.footer-nav) { margin: 0; gap: 4px; }
footer:not(.devlands) .container > .row.justify-content-center:not(.footer-nav) + br { display: none; }
footer:not(.devlands) .container > .row.justify-content-center:not(.footer-nav) .col-2 { flex: 0 0 auto; width: auto; max-width: none; padding: 0; }
footer:not(.devlands) .container > .row.justify-content-center:not(.footer-nav) .col-2 a { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; margin: 0; transition: background .15s, transform .35s cubic-bezier(.34,1.56,.64,1); }
footer:not(.devlands) .container > .row.justify-content-center:not(.footer-nav) .col-2 a:hover { background: var(--ic-accent-tint); transform: translateY(-3px) rotate(-8deg); }
footer:not(.devlands) .container > .row.justify-content-center:not(.footer-nav) .col-2 .mdi { transition: color .15s; }
footer:not(.devlands) .footer-nav { gap: 2px; margin: 22px 0 26px !important; }
footer:not(.devlands) .footer-nav a.footer-link { position: relative; z-index: 0; display: inline-block; margin: 0 2px; padding: 9px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 600; line-height: 1; letter-spacing: .06em; text-decoration: none !important; transition: color .15s; }
footer:not(.devlands) .footer-nav a.footer-link:hover { color: var(--ic-accent-2) !important; }
footer:not(.devlands) .footer-nav a.footer-link::before { content: ""; position: absolute; left: 11px; right: 11px; bottom: 7px; height: 6px; border-radius: 3px; background: var(--ic-accent-line); z-index: -1; transform: scaleX(0) rotate(-1.5deg); transform-origin: left center; transition: transform .25s cubic-bezier(.22,1,.36,1), background .2s; }
footer:not(.devlands) .footer-nav a.footer-link:hover::before { transform: scaleX(1) rotate(-1.5deg); }
footer:not(.devlands) .footer-nav a.footer-link.active::before { transform: scaleX(1) rotate(-1.5deg); background: #fde047; }
footer:not(.devlands) .footer-nav a.footer-link.active:hover::before { background: var(--ic-accent-line); }
footer:not(.devlands) .footer-copyright { font-size: 13.5px; line-height: 1.7; }
footer:not(.devlands) .footer-copyright a { font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
	footer .container > .row .col-2 a, footer .footer-nav a.footer-link::before { transition: none; }
	footer .container > .row .col-2 a:hover { transform: none; }
}


/* On the phone the marker is a short bar at the row's left edge. This block
   sits last so it outranks the desktop marker rules above, which share its
   specificity. */
@media only screen and (max-width: 991px) {
	.navbar:where(:not(.devlands)) .navbar-nav > a.nav-link::before, .navbar:where(:not(.devlands)) .navbar-nav .nav-link.dropdown > a::before { left: 0; right: auto; top: 9px; bottom: 9px; width: 4px; height: auto; border-radius: 2px; background: var(--ic-accent-2); transform: scaleY(0); transform-origin: center; }
	.navbar:where(:not(.devlands)) .navbar-nav > a.nav-link:hover::before, .navbar:where(:not(.devlands)) .navbar-nav .nav-link.dropdown > a:hover::before, .navbar:where(:not(.devlands)) .navbar-nav .nav-link.dropdown.show > a::before, .navbar:where(:not(.devlands)) .navbar-nav > a.nav-link.active::before, .navbar:where(:not(.devlands)) .navbar-nav .nav-link.dropdown > a.active::before { transform: scaleY(1); }
	.navbar:where(:not(.devlands)) .navbar-nav > a.nav-link.active::before, .navbar:where(:not(.devlands)) .navbar-nav .nav-link.dropdown > a.active::before { background: #fde047; }
	.navbar:where(:not(.devlands)) .navbar-nav > a.nav-link.active:hover::before, .navbar:where(:not(.devlands)) .navbar-nav .nav-link.dropdown > a.active:hover::before { background: var(--ic-accent-2); }
}


/* ---- the footer's Learn: the header's menu, opening upwards ----------------- */
.learn-menu { text-align: left; }
footer:not(.devlands) .footer-learn { position: relative; display: inline-block; }
footer:not(.devlands) .footer-learn .dropdown-toggle::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 2px 7px; border: 0; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(-135deg) translateY(-2px); vertical-align: 1px; transition: transform .2s; }
footer:not(.devlands) .footer-learn.show .dropdown-toggle::after { transform: rotate(45deg); }
footer:not(.devlands) .footer-learn.show > a.footer-link { color: var(--ic-accent-2) !important; }
footer:not(.devlands) .footer-learn.show > a.footer-link::before { transform: scaleX(1) rotate(-1.5deg); }
footer:not(.devlands) .footer-learn > a.footer-link::before { right: 24px; }
footer:not(.devlands) .footer-learn .learn-menu { left: 50%; right: auto; transform: translateX(-50%); max-width: calc(100vw - 32px); margin: 0 0 12px; animation-name: menu-pop-up; }
@keyframes menu-pop-up { from { margin-bottom: 2px; } to { margin-bottom: 12px; } }
@media only screen and (max-width: 720px) {
	/* on the phone the footer's menu is a sheet at the bottom of the screen */
	footer:not(.devlands) .footer-learn .learn-menu { position: fixed; left: 16px; right: 16px; bottom: 16px; top: auto; transform: none; min-width: 0; max-width: none; margin: 0; grid-template-columns: minmax(0, 1fr); max-height: 70vh; overflow-y: auto; animation: none; z-index: 1050; }
}


/* ---- dark theme: the few places tokens alone do not cover ------------------- */
/* The accents brighten in the dark theme, so white text on a filled button no
   longer reads; those buttons take navy text. A store card derives its kicker
   colour from the product's own hue by mixing toward black, which is invisible
   on a dark card, so it mixes toward white instead. */
:root[data-theme="dark"] main .ic-actions a.ic-button:not(.ghost), :root[data-theme="dark"] main a.ic-button:not(.ghost),
:root[data-theme="dark"] main.tools-page .tool-actions a.button:not(.ghost),
:root[data-theme="dark"] main.tool-page .tool-intro .hero-actions a.primary, :root[data-theme="dark"] main.tool-page .tool-intro .hero-actions a:hover,
:root[data-theme="dark"] main.tool-page .tp-wrap .cta a.cta-a.primary, :root[data-theme="dark"] main.tool-page .tp-wrap .cta a.cta-a:hover,
:root[data-theme="dark"] .learn .button:not(.ghost), :root[data-theme="dark"] main.learn .learn-wrap a.button:not(.ghost), :root[data-theme="dark"] main.learn .learn-wrap a.button:not(.ghost):hover,
:root[data-theme="dark"] button.copy, :root[data-theme="dark"] button.copy:hover, :root[data-theme="dark"] button.next-step, :root[data-theme="dark"] button.next-step:hover,
:root[data-theme="dark"] .explorer-stepper button:hover { color: #1e1b4b !important; }
:root[data-theme="dark"] .ic-card.from-hue { --hue-ink: color-mix(in srgb, var(--hue) 55%, #fff); }
:root[data-theme="dark"] .ic-card.from-hue .product-blurb { color: var(--ic-ink); }
/* the footer's upper band follows the theme (its inline colour is Devlands-only now) */
footer:not(.devlands) { background-color: var(--ic-bg); }
footer:not(.devlands) .footer-copyright { background-color: var(--ic-chip) !important; }

/* In the dark theme the marker that draws itself under a nav or footer link on
   hover is the light yellow, and the hovered word goes bright; the current
   section's marker is that yellow already, and stays so under the pointer. */
:root[data-theme="dark"] .navbar .navbar-nav > a.nav-link::before, :root[data-theme="dark"] .navbar .navbar-nav .nav-link.dropdown > a::before,
:root[data-theme="dark"] footer:not(.devlands) .footer-nav a.footer-link::before { background: #fde047; }
:root[data-theme="dark"] .navbar .navbar-nav > a.nav-link.active:hover::before, :root[data-theme="dark"] .navbar .navbar-nav .nav-link.dropdown > a.active:hover::before,
:root[data-theme="dark"] footer:not(.devlands) .footer-nav a.footer-link.active:hover::before { background: #fde047; }
:root[data-theme="dark"] .navbar .navbar-nav > a.nav-link:hover, :root[data-theme="dark"] .navbar .navbar-nav .nav-link.dropdown > a:hover, :root[data-theme="dark"] .navbar .navbar-nav .nav-link.dropdown.show > a,
:root[data-theme="dark"] footer:not(.devlands) .footer-nav a.footer-link:hover, :root[data-theme="dark"] footer:not(.devlands) .footer-learn.show > a.footer-link { color: #fff !important; }
@media only screen and (max-width: 991px) {
	:root[data-theme="dark"] .navbar .navbar-nav > a.nav-link:hover, :root[data-theme="dark"] .navbar .navbar-nav .nav-link.dropdown > a:hover, :root[data-theme="dark"] .navbar .navbar-nav .nav-link.dropdown.show > a { background: rgba(253,224,71,.10); }
}

/* The home page's three link columns are indigo in both themes. The general
   `main a` rule above paints links its old light blue with !important, so this
   one outranks it rather than relying on index.css alone. */
body.home:not(.devlands) main .coding-blog-block a { color: var(--ic-accent) !important; }
body.home:not(.devlands) main .coding-blog-block a:hover { color: var(--ic-accent-ink) !important; }


/* ---- modals and email capture forms ----------------------------------------- */
/* One look for every email-capture modal on this site (Decoding Git, Coding
   Essentials, Devlands, Ask a dev): a card on the theme tokens with the pastel
   stripe and a corner blob, in place of the product-coloured borders and the
   pixel frame. The Devlands site (.devlands-domain) keeps its own modal. The
   forms themselves (in the modals, the sidebar, inline in posts, on a product
   page, in the journal's bar) share the rules below; the legacy product-colour
   rules above carry !important and ids, so these do too. */
.modal:not(.devlands-domain) .modal-dialog { max-width: 720px !important; }
.modal:not(.devlands-domain) .modal-inner { background: none !important; }
.modal:not(.devlands-domain) .modal-content { position: relative; overflow: hidden; padding: 6px 0 0; border: 0 !important; border-image: none !important; border-radius: 26px !important; background: var(--ic-card) !important; color: var(--ic-text); box-shadow: var(--ic-shadow-pop); }
.modal:not(.devlands-domain) .modal-content::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, #fde047 0 25%, var(--ic-em-line) 25% 50%, #c4b5fd 50% 75%, #fda4af 75%); }
.modal:not(.devlands-domain) .modal-content::after { content: ""; position: absolute; z-index: 0; right: -90px; bottom: -120px; width: 260px; height: 260px; border-radius: 50%; background: #c4b5fd; opacity: var(--ic-blob-opacity); pointer-events: none; }
.modal:not(.devlands-domain) .modal-header, .modal:not(.devlands-domain) .modal-body { position: relative; z-index: 1; }
.modal:not(.devlands-domain) .modal-header { align-items: flex-start; padding: 28px 30px 4px; border: 0 !important; }
.modal:not(.devlands-domain) .modal-title { margin: 0; text-align: left; font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: var(--ic-ink); }
.modal:not(.devlands-domain) .modal-title em { font-style: normal; }
/* the emphasised words (the product, FREE) are the accent colour, plain: no underline, no marker */
.modal:not(.devlands-domain) .modal-title u { text-decoration: none; }
.modal:not(.devlands-domain) .modal-title u, .modal:not(.devlands-domain) .modal-title .orange, .modal:not(.devlands-domain) .modal-title .blue, .modal:not(.devlands-domain) .modal-title .green { color: var(--ic-accent) !important; }
.modal:not(.devlands-domain) button.close, .modal:not(.devlands-domain) button.close:hover { flex: none; width: 36px; height: 36px; margin: -6px -10px 0 14px; padding: 0; border-radius: 50%; background: var(--ic-chip); color: var(--ic-ink) !important; opacity: 1; font-size: 22px; line-height: 36px; text-shadow: none; cursor: pointer !important; transition: background .15s, color .15s, transform .15s; }
.modal:not(.devlands-domain) button.close:hover { background: var(--ic-accent-soft); color: var(--ic-accent) !important; transform: rotate(90deg); }
.modal:not(.devlands-domain) .modal-body { padding: 8px 30px 28px !important; }
.modal:not(.devlands-domain) .modal-body p { color: var(--ic-text); font-size: 15px; line-height: 1.55; }
/* fields on the left, cover on the right; the captcha (moved into the form by
   emailCaptureModal.js when the modal opens) takes a full row underneath */
.modal:not(.devlands-domain) #emailCaptureForm, .modal:not(.devlands-domain) #emailCaptureForm6 { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; text-align: left; }
.modal:not(.devlands-domain) .emailCaptureFormDiv1 { flex: 1 1 260px; width: auto; margin: 0 !important; }
.modal:not(.devlands-domain) .emailCaptureFormDiv2 { flex: 0 0 200px; width: 200px; margin: 0 !important; }
.modal:not(.devlands-domain) #emailCaptureForm .g-recaptcha, .modal:not(.devlands-domain) #emailCaptureForm6 .g-recaptcha { flex: 0 0 100%; margin: 0; }
.modal:not(.devlands-domain) .emailCaptureFormDiv1 .input-group { margin: 0 0 12px !important; }
.modal:not(.devlands-domain) .emailCaptureFormDiv1 .input-group:last-child { margin-bottom: 0 !important; }
.modal:not(.devlands-domain) #emailCaptureForm3 { width: auto; }
.modal:not(.devlands-domain) #emailCaptureForm3 .input-group { display: block; }
.modal:not(.devlands-domain) #emailCaptureForm3 .input-group .form-control, .modal:not(.devlands-domain) #emailCaptureForm3 .input-group-append { display: inline-block; vertical-align: middle; }
.modal:not(.devlands-domain) #emailCaptureForm3 .form-control { width: calc(100% - 96px); border-radius: 12px 0 0 12px; }
.modal:not(.devlands-domain) .modal-body .g-recaptcha { margin-top: 12px; }
@media only screen and (max-width: 600px) {
	.modal:not(.devlands-domain) #emailCaptureForm, .modal:not(.devlands-domain) #emailCaptureForm6 { display: block; }
	.modal:not(.devlands-domain) .emailCaptureFormDiv2 { width: 100%; margin-top: 18px; text-align: center; }
	.modal:not(.devlands-domain) .modal-header { padding: 22px 20px 2px; }
	.modal:not(.devlands-domain) .modal-body { padding: 6px 20px 22px !important; }
}

/* the forms, wherever they sit */
:where(html[data-theme]) form[id^="emailCaptureForm"][id] .input-group { flex-wrap: nowrap; }
:where(html[data-theme]) form[id^="emailCaptureForm"][id] .form-control { height: 42px; padding: 8px 14px; border: 1px solid var(--ic-rule); border-radius: 12px; background: var(--ic-panel) !important; color: var(--ic-text) !important; font-size: 14px; font-weight: 500; box-shadow: none; transition: border-color .15s, box-shadow .15s; }
:where(html[data-theme]) form[id^="emailCaptureForm"][id] .form-control::placeholder { color: var(--ic-muted); opacity: 1; }
:where(html[data-theme]) form[id^="emailCaptureForm"][id] .form-control.readonly { cursor: pointer; }
:where(html[data-theme]) form[id^="emailCaptureForm"][id] .form-control:focus, .modal:not(.devlands-domain) #email:focus { border-color: var(--ic-accent-line) !important; outline: 0; box-shadow: 0 0 0 3px var(--ic-accent-tint) !important; }
:where(html[data-theme]) form[id^="emailCaptureForm"][id] .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
:where(html[data-theme]) form[id^="emailCaptureForm"][id] .input-group-append .btn { height: 42px; padding: 0 16px; border-radius: 0 12px 12px 0 !important; font-size: 14px; font-weight: 700; line-height: 40px; box-shadow: none !important; transition: background .15s, color .15s; }
:where(html[data-theme]) form[id^="emailCaptureForm"][id] button[type="submit"], :where(html[data-theme]) form[id^="emailCaptureForm"][id] button[type="submit"]:focus { background: var(--ic-accent) !important; border: 1px solid var(--ic-accent) !important; color: #fff !important; }
:where(html[data-theme]) form[id^="emailCaptureForm"][id] button[type="submit"]:hover { background: var(--ic-accent-ink) !important; border-color: var(--ic-accent-ink) !important; }
:where(html[data-theme]) form[id^="emailCaptureForm"][id] button[type="submit"]:disabled { opacity: .55; }
:where(html[data-theme]) form[id^="emailCaptureForm"][id] .dropdown-toggle, :where(html[data-theme]) form[id^="emailCaptureForm"][id] .dropdown-toggle:focus { background: var(--ic-card) !important; border: 1px solid var(--ic-rule) !important; color: var(--ic-ink) !important; }
:where(html[data-theme]) form[id^="emailCaptureForm"][id] .dropdown-toggle:hover, :where(html[data-theme]) form[id^="emailCaptureForm"][id] .show > .dropdown-toggle { background: var(--ic-accent-soft) !important; border-color: var(--ic-accent-line) !important; color: var(--ic-accent) !important; }
:where(html[data-theme]) form[id^="emailCaptureForm"][id] .dropdown-menu { min-width: 220px; padding: 6px; border: 1px solid var(--ic-rule); border-radius: 14px; background: var(--ic-card); box-shadow: var(--ic-shadow-pop); }
:where(html[data-theme]) form[id^="emailCaptureForm"][id] .dropdown-item { padding: 9px 12px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--ic-ink) !important; cursor: pointer !important; }
:where(html[data-theme]) form[id^="emailCaptureForm"][id] .dropdown-item:hover, :where(html[data-theme]) form[id^="emailCaptureForm"][id] .dropdown-item:focus, :where(html[data-theme]) form[id^="emailCaptureForm"][id] .dropdown-item:active { background: var(--ic-accent-soft) !important; color: var(--ic-accent) !important; }
:where(html[data-theme]) form[id^="emailCaptureForm"][id] .front-cover { display: block; width: 100%; max-width: 200px; margin: 0 auto; border-radius: 14px; box-shadow: var(--ic-shadow-card); }
:where(html[data-theme]) form[id^="emailCaptureForm"][id] .g-recaptcha { margin-top: 10px; }
:where(html[data-theme]) #emailCaptureConfirmation, :where(html[data-theme]) #askadevEmailCaptureConfirmation, :where(html[data-theme]) #emailCaptureConfirmation4, :where(html[data-theme]) #emailCaptureConfirmation5, :where(html[data-theme]) #emailCaptureConfirmation6 { display: none; margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--ic-em-soft); color: var(--ic-em-ink); font-size: 14px; font-weight: 600; }
/* the accents brighten in the dark theme: navy text on the filled button, as everywhere else */
:root[data-theme="dark"] form[id^="emailCaptureForm"][id] button[type="submit"], :root[data-theme="dark"] form[id^="emailCaptureForm"][id] button[type="submit"]:hover { color: #1e1b4b !important; }

/* a product page's free-extract form: its box follows the theme (the inline border does not) */
.free-sample { margin-top: 25px !important; padding: 18px 22px 8px !important; border: 1px solid var(--ic-rule) !important; border-radius: 18px; background: var(--ic-panel); }
.free-sample h3 { font-size: 20px; font-weight: 700; color: var(--ic-ink); }
.free-sample p, .free-sample p a { color: var(--ic-text); }

/* the journal's bar under a post */
#email-capture-bar #email-capture-block { max-width: 520px; padding: 18px 22px; border: 1px solid var(--ic-rule); border-radius: 18px; background: var(--ic-card); box-shadow: var(--ic-shadow-card); }
#email-capture-bar #email-capture-block p { color: var(--ic-ink); }

/* The sidebar's subscribe box on narrow screens, where the sidebar itself is
   hidden (index.css, post.css pin it to the foot of the screen): a compact
   sheet above the page (z-index over content, under the modal), with the
   captcha folded away until the reader starts typing. emailCapture.js sets
   .active and .dismissed. */
@media only screen and (max-width: 1200px) {
	:where(html[data-theme]) #topright-sidebar-ad #email-capture-block { position: fixed; left: 12px; right: 12px; bottom: 12px; width: auto !important; max-width: 560px; margin: 0 auto !important; padding: 0; z-index: 2 !important; /* over the article, under the nav (3) and its open menu */ border: 1px solid var(--ic-rule) !important; border-radius: 18px !important; background: var(--ic-card) !important; box-shadow: var(--ic-shadow-pop) !important; overflow: hidden; }
	:where(html[data-theme]) #topright-sidebar-ad #email-capture-block.dismissed { display: none; }
	/* the block around it is sticky in the two-column layout; sticky makes a stacking
	   context, which would trap the sheet's z-index under the article's text */
	:where(html[data-theme]) #topright-sidebar-ad .fix-on-scroll { position: static !important; }
	:where(html[data-theme]) #topright-sidebar-ad #cta-toast-2 { max-width: none; margin: 0; border: 0; background: transparent; box-shadow: none; }
	:where(html[data-theme]) #topright-sidebar-ad #cta-toast-2 .toast-header { display: flex; align-items: center; padding: 10px 8px 4px 16px; border: 0; background: transparent; }
	:where(html[data-theme]) #topright-sidebar-ad #cta-toast-2 .toast-header > span { font: 700 11px/1 sans-serif; font-family: inherit; letter-spacing: .14em; text-transform: uppercase; color: var(--ic-muted); }
	:where(html[data-theme]) #topright-sidebar-ad #cta-toast-2 .toast-header .close { position: static; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0 0 0 auto !important; padding: 0; border-radius: 50%; background: var(--ic-chip); color: var(--ic-ink); opacity: 1; font-size: 18px; line-height: 1; text-shadow: none; }
	:where(html[data-theme]) #topright-sidebar-ad #cta-toast-2 .toast-header .close:hover { background: var(--ic-accent-soft); color: var(--ic-accent); }
	:where(html[data-theme]) #topright-sidebar-ad #cta-toast-2 .toast-body { padding: 0 16px 14px !important; }
	:where(html[data-theme]) #topright-sidebar-ad #cta-toast-2 .toast-body > .toast-inline-para > p { margin: 0 0 8px !important; font-size: 13px; line-height: 1.4; color: var(--ic-text-2) !important; }
	:where(html[data-theme]) #topright-sidebar-ad #cta-toast-2 .input-group { margin: 0 !important; }
	:where(html[data-theme]) #topright-sidebar-ad #cta-toast-2 .g-recaptcha { max-height: 0; overflow: hidden; margin: 0; transition: max-height .25s, margin .25s; }
	:where(html[data-theme]) #topright-sidebar-ad #email-capture-block.active .g-recaptcha { max-height: 90px; margin-top: 10px; }
	:where(html[data-theme]) #topright-sidebar-ad #cta-toast-2 #emailCaptureConfirmation { display: none; }
}


/* ---- enlarge: a git-sim frame lifts out of the page and fills the window ----
   Shared by the Git lessons and the blog's embedded graphs (js/tools/git-sim-enlarge.js).
   The button is styled like the viewer's own bar buttons, from the frame's variables. */
.frame-expand { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; margin-left: 6px; border: 1px solid var(--rule); border-radius: 999px; background: var(--panel); color: var(--text) !important; font: 700 12px/1 var(--font, inherit); cursor: pointer; white-space: nowrap; }
.frame-expand:hover { border-color: var(--accent); color: var(--accent) !important; }
.frame-expand .expand-icon { font-size: 13px; }
@media (max-width: 560px) { .frame-expand .expand-text { display: none; } }
/* a frame without a bar (a before/after pair) carries the button in its corner */
.git-sim-frame > .frame-expand.floating { position: absolute; top: 8px; right: 8px; z-index: 3; margin: 0; box-shadow: 0 2px 8px rgba(15, 23, 42, .12); }
.git-sim-frame > .frame-expand.floating .expand-text { display: none; }
/* enlarged: Close takes the Enlarge button's place in the frame's own corner, so the frame's own button goes */
.is-full .frame-expand { display: none; }
/* while enlarged, the frame is moved to <body> and fills the window over a veil */
.frame-veil { position: fixed; inset: 0; z-index: 9000; background: rgba(15, 23, 42, .72); }
/* Close lives inside the frame: in its top-right corner row when it has one, floating over the picture otherwise */
.frame-close { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; margin: 0; border: 1px solid var(--accent, var(--ic-accent)); border-radius: 999px; background: var(--panel, var(--ic-card)); color: var(--accent, var(--ic-accent)) !important; font: 700 12px/1 var(--font, inherit); cursor: pointer; white-space: nowrap; }
.frame-close:hover { background: var(--accent, var(--ic-accent)); color: var(--bg, #fff) !important; }
.frame-close.floating { position: absolute; top: 12px; right: 12px; z-index: 5; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.frame-placeholder { border-radius: 15px; background: var(--ic-chip); }
/* an open help or share menu may be taller than the frame: let it spill out instead of being clipped */
.git-sim-frame:has(#helpMenu:not([hidden])), .git-sim-frame:has(#shareMenu:not([hidden])) { overflow: visible; }
.git-sim-frame.is-full { position: fixed; left: 16px; right: 16px; top: 16px; bottom: 16px; z-index: 9001; display: flex; flex-direction: column; margin: 0; border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); cursor: default; }
.git-sim-frame.is-full .frame-top { flex: none; }
.git-sim-frame.is-full #bar { flex: none; display: grid; }
.git-sim-frame.is-full #stage { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 16px; }
.git-sim-frame.is-full .git-sim-credit { display: none; }
/* the picture is as tall as the window allows and no wider than the frame; the
   viewBox keeps its proportions, so a wide graph is letterboxed rather than clipped */
.git-sim-frame.is-full #stage > svg, .git-sim-frame.is-full #scene { height: calc(100vh - 180px) !important; width: auto; max-width: 100%; }
body.frame-full { overflow: hidden; }


/* the newsletter modal's form: the field, then the captcha, then the confirmation */
.modal:not(.devlands-domain) #emailCaptureForm7 { text-align: left; }
.modal:not(.devlands-domain) #emailCaptureForm7 .input-group { max-width: 440px; margin: 0 0 12px !important; }
.modal:not(.devlands-domain) #emailCaptureForm7 span[id^="emailCaptureConfirmation"] { display: none; color: var(--ic-em-ink, #047857); font-weight: 600; }
/* a form that has been sent shows its confirmation and folds the rest */
form.capture-inline.done .input-group, form.capture-inline.done .g-recaptcha { display: none !important; }
form.capture-inline.done span[id^="emailCaptureConfirmation"] { display: block !important; }
form.capture-inline span[id^="emailCaptureConfirmation"] { display: none; }
/* a subscriber does not see the sidebar's subscribe sheet again */
html.ic-subscribed #email-capture-block { display: none !important; }


/* ---- the Devlands modal on initialcommit.com: the pitch, then the offer ---- */
.modal.devlands:not(.devlands-domain) .devlands-pitch { display: flex; gap: 20px; align-items: flex-start; margin: 4px 0 14px; }
.modal.devlands:not(.devlands-domain) .pitch-visual { flex: 0 0 150px; }
.modal.devlands:not(.devlands-domain) .pitch-visual img { display: block; width: 150px; height: auto; border-radius: 14px; box-shadow: var(--ic-shadow-card); }
.modal.devlands:not(.devlands-domain) .pitch-text p { margin: 0 0 10px; }
.modal.devlands:not(.devlands-domain) .pitch-actions { margin: 12px 0 14px !important; }
.modal.devlands:not(.devlands-domain) a.pitch-cta, .modal.devlands:not(.devlands-domain) a.pitch-cta:visited { display: inline-block; padding: 11px 20px; border-radius: 999px; background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff !important; font-weight: 700; text-decoration: none !important; box-shadow: 0 12px 24px -14px #4f46e5; transition: transform .15s, filter .15s; }
.modal.devlands:not(.devlands-domain) a.pitch-cta:hover { transform: translateY(-1px); filter: brightness(1.12); color: #fff !important; }
.modal.devlands:not(.devlands-domain) .pitch-offer { font-size: 14px; color: var(--ic-text-2) !important; }
.modal.devlands:not(.devlands-domain) .emailCaptureFormDiv2 { display: none; }
.modal.devlands:not(.devlands-domain) .emailCaptureFormDiv1 { flex: 1 1 100%; width: 100%; margin: 0 !important; }
@media (max-width: 560px) { .modal.devlands:not(.devlands-domain) .devlands-pitch { flex-direction: column; } .modal.devlands:not(.devlands-domain) .pitch-visual { flex-basis: auto; } }

.modal.devlands:not(.devlands-domain) .pitch-text, .modal.devlands:not(.devlands-domain) .pitch-text p { text-align: left; }

#topright-sidebar-ad .lesson-ring b { align-items: center; }
.modal.devlands:not(.devlands-domain) a.pitch-cta { margin: 0 !important; }

.modal.devlands:not(.devlands-domain) .pitch-text p { padding-left: 0 !important; padding-right: 0 !important; }

.modal.devlands:not(.devlands-domain) .pitch-text p { margin-left: 0 !important; margin-right: 0 !important; }

/* the sidebar's Follow Us icons behave like the footer's: neutral, then the brand color with a hop and a tilt */
:where(html[data-theme]) #cta-toast-3 .row.justify-content-center { margin: 0; gap: 4px; }
:where(html[data-theme]) #cta-toast-3 .row.justify-content-center + br { display: none; }
:where(html[data-theme]) #cta-toast-3 .col-2 { flex: 0 0 auto; width: auto; max-width: none; padding: 0; }
:where(html[data-theme]) #cta-toast-3 .col-2 a { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; margin: 0; transition: background .15s, transform .35s cubic-bezier(.34,1.56,.64,1); }
:where(html[data-theme]) #cta-toast-3 .col-2 a:hover { background: var(--ic-accent-tint); transform: translateY(-3px) rotate(-8deg); }
:where(html[data-theme]) #cta-toast-3 .col-2 .mdi { transition: color .15s; }

/* the git-sim page's signup, under Install and run (uses the viewer page's own variables) */
.gitsim-capture { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 12px 24px; align-items: center; margin: 22px 0 8px; padding: 18px 22px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--rule)); border-radius: 16px; background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.gitsim-capture-title { margin: 0 0 4px !important; font-weight: 700; font-size: 17px; color: var(--text); }
.gitsim-capture-text p:not(.gitsim-capture-title) { margin: 0 !important; font-size: 14px; color: var(--muted); }
.gitsim-capture form .input-group { margin-bottom: 0 !important; }
.gitsim-capture form .form-control { background: var(--bg); color: var(--text); border: 1px solid var(--rule); border-radius: 999px 0 0 999px; }
.gitsim-capture .gitsim-form button[type="submit"] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; border-radius: 0 999px 999px 0; }
.gitsim-capture .g-recaptcha { max-height: 0; overflow: hidden; transition: max-height .25s, margin .25s; }
.gitsim-capture:focus-within .g-recaptcha, .gitsim-capture.active .g-recaptcha { max-height: 90px; margin-top: 10px; }
@media (max-width: 720px) { .gitsim-capture { grid-template-columns: minmax(0, 1fr); } }
/* the field gives way to the button on a narrow screen rather than pushing it out of the box */
.gitsim-capture form .input-group > .form-control { min-width: 0; }
/* the credit under a post's graph: the sample-repo note, then the way to run it yourself */
.git-sim-frame .git-sim-credit .credit-try { font-weight: 600; }

/* the way to run it yourself gets its own line under the credit, instead of wrapping mid-phrase */
.git-sim-frame .git-sim-credit .credit-try { display: inline-block; margin-top: 2px; }

.gitsim-capture .gitsim-form button[type="submit"], .gitsim-capture .gitsim-form button[type="submit"]:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.gitsim-capture .gitsim-form button[type="submit"]:hover { filter: brightness(1.1); }

/* the credit under a post's graph: the sample-repo note as a quiet chip on the left, the way to run it
   yourself on the right, in one row (stacked and centered only when the frame is too narrow) */
.git-sim-frame .git-sim-credit { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; text-align: left !important; }
.git-sim-frame .git-sim-credit .credit-note { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--panel); border: 1px solid var(--rule); font-size: 12px; white-space: nowrap; }
.git-sim-frame .git-sim-credit .credit-try { display: inline; margin: 0; font-weight: 600; text-align: right; }
@container (max-width: 640px) { .git-sim-frame .git-sim-credit { justify-content: center; text-align: center !important; } .git-sim-frame .git-sim-credit .credit-try { text-align: center; } }

/* the sample-repo note in the frame's top row; the line under the slider is centered on its own */
.git-sim-frame .frame-top .credit-note { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--panel); border: 1px solid var(--rule); color: var(--muted); font: 12px/1.3 var(--font); white-space: nowrap; }
.git-sim-frame .frame-top .credit-note a { color: var(--accent) !important; font-weight: 600; }
.git-sim-frame .git-sim-credit { justify-content: center !important; text-align: center !important; }
.git-sim-frame .git-sim-credit .credit-try { text-align: center; }
@container (max-width: 520px) { .git-sim-frame .frame-top .credit-note { display: none; } }

/* the sample-repo note as a quiet caption in the graph's bottom-right corner */
.git-sim-frame #stage { position: relative; padding-bottom: 26px !important; }
.git-sim-frame #stage > .credit-note { position: absolute; right: 12px; bottom: 6px; display: inline; padding: 0; border: 0; background: none; color: var(--muted); font: italic 11.5px/1.3 var(--font); opacity: .85; white-space: nowrap; pointer-events: auto; }
.git-sim-frame #stage > .credit-note a { color: inherit !important; font-weight: 600; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; }
.git-sim-frame #stage > .credit-note a:hover { color: var(--accent) !important; }
.git-sim-frame.is-full #stage > .credit-note { right: 20px; bottom: 10px; }
@container (max-width: 520px) { .git-sim-frame #stage > .credit-note { right: 50%; transform: translateX(50%); } }

/* the stage is rebuilt by the viewer, so the caption sits right after it, pulled up into its bottom-right corner */
.git-sim-frame .credit-note.stage-caption { position: relative; z-index: 1; display: block; margin: -24px 14px 6px auto; width: max-content; max-width: calc(100% - 28px); padding: 0; border: 0; background: none; color: var(--muted); font: italic 11.5px/1.3 var(--font); opacity: .9; white-space: nowrap; }
.git-sim-frame .credit-note.stage-caption a { color: inherit !important; font-weight: 600; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; }
.git-sim-frame .credit-note.stage-caption a:hover { color: var(--accent) !important; }
.git-sim-frame.is-full .credit-note.stage-caption { flex: none; margin: -26px 22px 8px auto; }
@container (max-width: 520px) { .git-sim-frame .credit-note.stage-caption { margin-right: auto; margin-left: auto; } }

/* the caption now opens the bar: under the divider, centered above the slider (same size and style) */
.git-sim-frame #bar > .credit-note.stage-caption { margin: 0 auto 8px; justify-self: center; text-align: center; }
.git-sim-frame.is-full #bar > .credit-note.stage-caption { margin: 0 auto 8px; }

/* under the slider: the sample-repo note as a small grey pill, then the "Visually simulate..." link */
.git-sim-frame .git-sim-credit { flex-direction: column; align-items: center; gap: 8px; }
.git-sim-frame .git-sim-credit .credit-note.credit-pill { display: inline-block; margin: 0; padding: 3px 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--rule); color: var(--muted); font: italic 11.5px/1.4 var(--font); white-space: nowrap; }
.git-sim-frame .git-sim-credit .credit-note.credit-pill a { color: inherit !important; font-weight: 600; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; }
.git-sim-frame .git-sim-credit .credit-note.credit-pill a:hover { color: var(--accent) !important; }

/* the side-by-side before/after graphs carry no "try git-sim" line; only the full-width ones do */
.embed-pair .git-sim-frame .git-sim-credit { display: none !important; }

.gitsim-capture form.gitsim-form[id] button[type="submit"], .gitsim-capture form.gitsim-form[id] button[type="submit"]:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }

/* The hero as the newest commit in a git log --graph: a lane down the card's
   left edge, running in at the top and out at the bottom, with the commit
   beside the kicker (its branch label) and the commit before it beside the
   title. --lane is the lane's distance from the card's left edge, --pad the
   card's own left padding (where the kicker and title start). */
.hero-card { --lane: 24px; --pad: 52px; --lane-ink: color-mix(in srgb, var(--ic-accent) 55%, transparent); }
.hero-card::before { content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; left: calc(var(--lane) - 1px); width: 2px; background: var(--lane-ink); pointer-events: none; }
.hero-card > * { position: relative; z-index: 1; }
.hero-card .hero-kicker { position: relative; }
.hero-card .hero-kicker::before { content: ""; position: absolute; top: 50%; left: calc(var(--lane) - var(--pad) - 8px); width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--ic-accent); box-shadow: 0 0 0 4px var(--ic-hero-bg), 0 0 0 6px color-mix(in srgb, var(--ic-accent) 35%, transparent); transform: rotate(2deg); }
.hero-card h1 { position: relative; }
.hero-card h1::before { content: ""; position: absolute; top: .52em; left: calc(var(--lane) - var(--pad) - 6px); width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--ic-hero-bg); border: 2px solid var(--lane-ink); box-sizing: border-box; }
@media (max-width: 900px) { .hero-card { --lane: 15px; --pad: 42px; padding-left: 42px !important; } }

/* ---- Devlands ---------------------------------------------------------------- */
/* devlands.com shares these templates but keeps its own look: the nav, the
   email forms and the sidebar above are scoped to initialcommit
   (.navbar:where(:not(.devlands)), :where(html[data-theme]): Devlands sets no
   theme; :where adds no specificity, so later overrides still win); these
   undo the rest. The page starts right under the
   cloud nav (the 24px gap is for the hero cards), the footer links keep the
   spacing their px-3 gave them, and the social icons hop and tilt on hover
   like initialcommit's, in their own colors, without the tile. */
body.devlands main.page-content { padding-top: 0; }
/* the cloud's links on a phone, as the old site-wide narrow-screen nav rule set them */
@media only screen and (max-width: 991px) { nav.devlands a:not(.rss-link):not(.navbar-brand) { color: black !important; padding: 8px 0 !important; margin-left: 30px !important; } }
footer.devlands .footer-nav a.footer-link { padding: 0 1rem; }
footer.devlands .container > .row.justify-content-center:not(.footer-nav) .col-2 a { display: inline-block; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
footer.devlands .container > .row.justify-content-center:not(.footer-nav) .col-2 a:hover { transform: translateY(-3px) rotate(-8deg); }
@media (prefers-reduced-motion: reduce) { footer.devlands .container > .row.justify-content-center:not(.footer-nav) .col-2 a { transition: none; } footer.devlands .container > .row.justify-content-center:not(.footer-nav) .col-2 a:hover { transform: none; } }