@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700|Open+Sans:300,400,400i,700&display=swap&subset=latin-ext');

* {
	box-sizing: border-box;
	text-wrap: balance;
	text-wrap: pretty;
}

/* Selected text needs an explicit color, not the parent's. In light mode
   the page text is dark and passes on a salmon background; in dark mode
   the page text is near-white and fails. Pin to a fixed dark text so the
   pair is 11.2:1 AAA regardless of theme. */
::selection {
  background: var(--color-orange);
  color: #1c1c1c;
}
::-moz-selection {
  background: var(--color-orange);
  color: #1c1c1c;
}

/* ==========================================================================
   Accessibility hacks
   ========================================================================== */
:where(h1) {
  margin-block: 0.67em;
  font-size: 2em;
} /* To ensure consistent <h1> rendering for browsers that implement the old context-dependent default style while avoiding overwriting other style rules that target <h1> you can use :where(), which has zero specificity: */


img {
	display: block;
	max-width: 100%;
}

/* ==========================================================================
   Add CC icons
   ========================================================================== */
@font-face {
  font-display: swap;
  font-family: CCSymbols;
  font-synthesis: none;
  src: url(assets/webfonts/ccsymbols.woff2) format(woff2),
       url(assets/webfonts/ccsymbols.woff)  format(woff);
  unicode-range: u+a9, u+229c,
                 u+1f10d-1f10f,
                 u+1f16d-1f16f;
}

.cclicense {
    font-size: xxx-large;
}

.cclicense a:link, .cclicense a:visited, a:hover, a:active {
    text-decoration: none;
    color: var(--color-cclicense)
}
/* ==========================================================================
   End of CC icons
   ========================================================================== */

/* make global variables for text and background color */
:root {
    color-scheme: light dark; /* Supports both light and dark modes */
  --color-text: black;
  --color-background: white;
  
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

/* Add conditional styling for dark mode preference */
@media (prefers-color-scheme: dark) {
  /* Re-assign previous variables */
  :root {
    --color-text:		    white;		/* black => white */
    --color-background:		black;		/* white => black */
    --color-blue-light:		#4f6388;    
	--color-blue-lighter:	#f7faff;
	--color-blue-dark:		#F0F5FD;
	--color-orange:			#eb4f0a;    /* was lightsalmon */
	--color-orange-dark:	#ffc2aa;
	--color-orange-light:	#ff7038;
	--color-try-this: 		#bcbcbc;
	--color-cclicense:      #bf7f6f;		/* black => white */
	
    --color-toc-background:         #505050;
    --color-toc-text:               white;
    --color-toc-meta:               #ffc8ad;
    --color-toc-headings:           #d8d8d8;


	--color-gray-bg:		#777;

    --code-background-color: 		#faf9fb;  /* was #2d3034 */
    --code-mirror-background-color:	transparent;	
    --code-color:                   black;    /* should be white once implemented */
  }
}
/* ==========================================================================
   End of Dark Mode
   ========================================================================== */

/* ==========================================================================
   Vestibular Mode
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}

/* ==========================================================================
   End Vestibular Mode
   ========================================================================== */

/* Assign variables to page color and background */
body {
  color: var(--color-text);
  background-color: var(--color-background);
}

/* ==========================================================================
   Type
   ========================================================================== */

html {
	--ratio:				1.3;
	--size-xxxxlarge:		calc( var( --size-xxxlarge ) * var( --ratio ) );
	--size-xxxlarge:		calc( var( --size-xxlarge ) * var( --ratio ) );
	--size-xxlarge:			calc( var( --size-xlarge ) * var( --ratio ) );
	--size-xlarge:			calc( var( --size-large ) * var( --ratio ) );
	--size-large:			calc( 1rem * var( --ratio ) );
	--size-small:			calc( 1rem * .8 );
	
	--line-height: 			1.7rem;
	
	--color-blue-light:				#F0F5FD;    
	--color-blue-lighter:			#f7faff;
	--color-blue-dark:				#4f6388;
	--color-orange:					lightsalmon;
	--color-orange-dark:			#b03c10;
	--color-orange-light:			#ffc2aa;
	--color-try-this:               var(--color-blue-dark);
    --color-cclicense:              #9f5f4f;
	
    --color-toc-background:         #505050;
    --color-toc-text:               whitesmoke;
    --color-toc-meta:               #ffc8ad;
    --color-toc-headings:           #ffc8ad;

	--color-gray-bg:				#f9f9f9;

    --code-background-color: 		#f8f9fb;
    --code-mirror-background-color:	transparent;
    --code-color:                   black;
    
	
	--font-secondary:		CCSymbols, 'Libre Baskerville', serif;
	
	font-family: CCSymbols, 'Open Sans', Helvetica, Arial, sans-serif;
	line-height: 1.7;
}

@media ( min-width: 800px ) {
	html {
		font-size: 17px;
	}
}

@media ( min-width: 1200px ) {
	html {
		font-size: 18px;
	}
}

h1, h2, h3, h4, h5 {
	font-family: var(--font-secondary);
	font-variant-ligatures: common-ligatures;
	line-height: 1.2;
}

h1 {
	font-size: var( --size-xxxlarge );
}

h2 {
	font-size: var( --size-xxlarge );
	line-height:  calc( var(--line-height) * 1.5 );
	margin-bottom:  var(--line-height);
	margin-top: calc( var(--line-height) * 2 );
	padding-top: calc( var(--line-height) * 2 );
}

main h2:not(:first-of-type) {
	border-top: 1px solid #ccc;
}

main section {
	border-bottom: 1px solid #ccc;
	margin-bottom: calc( var(--line-height) * 2 );
	padding-bottom: calc( var(--line-height) * 2 );
}

main section:last-child {
	border: none;
}

h3 {
	font-size: var( --size-xlarge );
	line-height:  calc( var(--line-height) * 1.5 );
	margin-bottom:  calc( var(--line-height) / 2);
	margin-top: calc( var(--line-height) * 1.5 );
}

h2 + h3 {
	margin-top: calc( var(--line-height) * 2 );
}

h4 {
	font-size: var( --size-large );
	line-height:  var(--line-height);
	margin-bottom:  calc( var(--line-height) / 2);
	margin-top: calc( var(--line-height) * 1.5 );
}

h5 {
	font-size: 1rem;
	margin: calc( var(--line-height) / 2 ) 0;
}

p {
	margin: 0 0 calc( var(--line-height) / 2 );
}

ul{
	padding-left: 1.2rem;
}

ol ol {
	list-style-type: lower-latin;
	margin-top: calc( var(--line-height) / 2 );
}

nav li {
	margin-bottom: 1rem;
}

article li {
	margin-bottom: calc( var(--line-height) / 2 );
}

dt {
	font-weight: bold;
}

dd {
	margin: 0 0 2.8rem;;
}

a {
	color: var(--color-orange-dark);
	text-decoration: none;
}

a:hover, a:active, a:focus {
	text-decoration: underline;
}

.callout {
	font-size: var( --size-large );
	line-height: 1.2;
}

.meta-text {
	font-size: .9rem;
	color: var(--color-text);
	opacity: 0.7;
}
.site-footer .meta-text {
	color: var(--color-toc-meta);
	opacity: 1;
}
 
.big-point {
	border-left: 5px solid var(--color-orange);
	color: var(--color-blue-dark);
	font-family: var(--font-secondary);
	font-size: var(--size-large);
	font-weight: 300;
	line-height: 1.5; 
	margin: calc( var(--line-height) * 2 ) 0;
	padding: 0 0 0 1.7rem;
}

.try-this {
	background-color: var(--color-gray-bg);
	border-left: 4px solid var(--color-orange);
	color: var(--color-try-this);
	padding: 1rem 1rem 1rem 2rem;
}

.try-this:before {
	content: 'Try this: ';
	font-weight: bold;
}

.back-to-top {
    font-size: xlarge;
    font-weight: bold;
    text-decoration: none;
}

.big-arrow {
    font-size: xxx-large;
    font-weight: bold;
    text-decoration: none;
}

.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    text-decoration: none;
}

/* ==========================================================================
	Icons
	========================================================================== */

.icon {
	stroke: var(--color-orange);
	height: 2rem;
	width: 2rem;
}

/* ==========================================================================
	Figures
	========================================================================== */

figure {
	margin: 2.5rem 0;
}

figure > *:not(figcaption) {
}

figure > img {
	border: .25rem dashed var(--color-blue-light);
	padding: 1rem;
}
	
figcaption {
	font-size: var(--size-small);
	margin: 1rem;
}

@media( min-width: 56rem ) {
	
	figure {
		margin: 0;
	}
	
	figure > *:not(figcaption) {
		/*margin: 3rem 0; */
	}
	
	figure > img {
		padding: 3rem 2rem;
	}

}


/* ==========================================================================
	Tables
	========================================================================== */

table {
	border-collapse: collapse;
	margin: 1rem auto 4rem;
}

article > table {
	grid-column: 1 / span 12;
}

th {
	border-bottom: 1px solid #ccc;
	font-family: var(--font-secondary);
	font-size: var(--size-large);
	font-weight: bold;
	text-align: left;
}

tr:nth-child(2n) {
	background-color: var(--color-blue-light);
}

td, th {
	padding: 1rem;
}

td {
	max-width:  28rem;
	vertical-align: baseline;
}

tr td:first-child {
	font-size: 1.1rem;
	font-weight: bold;
}

@media ( min-width: 500px ) {
	td, th {
		padding: 2rem;
	}
}

/* ==========================================================================
   Details & Summary / Challenge
   ========================================================================== */

details {
	box-shadow: 0 4px 7px rgba( 0, 0, 0, .3 );
	
}

details:not([open]):hover {
	background-color: var(--color-blue-light);
}

details > div {
	padding: 0 2rem 4rem;
}

@media (min-width: 58rem) {
	article > details {
		grid-column: 1 / span 10;
	}

	.challenge-content {
		margin: auto;
		max-width: 34rem;
	}
}

@media (min-width: 68rem) {
	article > details {
		grid-column: 2 / span 7;
	}
}

summary {
	font-family: var(--font-secondary);
	font-weight: bold;
	padding: 2rem;
}

summary:hover, summary:focus {
	color: var(--color-orange-dark);
	cursor: pointer;
	outline: none;
}

details[open] summary {
	padding-bottom: 1rem;
}

.challenge-meta {
	border: 1px solid #ccc;
	border-width: 1px 0;
	font-size: smaller;
	margin-bottom: var(--line-height);
	padding: 1rem 0 .5rem;
}

.challenge-meta a {
	display: inline-block;
}

.challenge-content > ol > li {
	margin-bottom: calc( var(--line-height) * 1.5 );
}

.challenge-content li::marker {
	font-weight: bold;
}

.challenge-content ul li::marker {
	font-weight: normal;
}

.selectable {
	background-color: #f5f2f0;
	color: black;
	font-weight: normal;
	padding: .1rem .25rem;
	user-select: all;
}

div.selectable {
	margin-top: .5rem;
	padding: 1rem;
}


/* ==========================================================================
   Page Layout
   ========================================================================== */

html {
	overflow-x: hidden;
	scroll-behavior: smooth;
}

body {
	margin: 0;
}

main, .hero {
	margin: 4rem 2rem;
	max-width: 35rem;
	scroll-behavior: smooth;
}

@media ( min-width: 39rem ) {
	main, .hero {
		margin: 4rem auto;
	}
}

@media ( min-width: 58rem ) {
	
	main, .hero {
		margin: 0 2rem 4rem;
		max-width: 1400px;
	}
	
	article {
		display: grid;
		grid-gap: var(--line-height);
		grid-template-columns: repeat( 12, 1fr ) [full-end];	
	}
	
	article > * {
		grid-column: 2 / span 8;
		margin: 0;
	}
	
	article > h2 {
		margin-top: calc( var(--line-height) * 2 );
	}
	
	article > h3 {
		margin-top: calc( var(--line-height) * 1.5 );
	}
	
	article > figure {
		display: contents;
	}
	
	figure > *:not(figcaption) {
		grid-column: 1 / span 10;
		margin: calc( var(--line-height) * 2 ) 0 0;
	}
	
	figcaption {
		grid-column: span 8;
		margin: calc( var(--line-height) * -.5 ) calc( var(--line-height) / 2 ) calc( var(--line-height) * 2 );
	}
	
	article > code[class*=language-], article > pre[class*=language-], .code-block {
		grid-column: 1 / span 10;
		margin: 0 0 calc( var(--line-height) * 1.5 );
	}
	
	article > .code-block.code-example-good, article > .code-block.code-example-bad {
		margin-top: var(--line-height);
	}
	
	.big-point {
		grid-column: 1 / span 10;
	}
	
	.video-demo, .lesson-quiz-container, .cp_embed_wrapper, .pen-demo, .dominant-example {
		grid-column: 1 / span 12;
	}
	
	.try-this {
		grid-column: 1 / span 7;
	}
	
	.cp_embed_wrapper + .try-this, .pen-demo + .try-this {
		margin: calc( var(--line-height) * -3 ) 0  calc( var(--line-height) * 2 );
	}
	
	.dominant-example-section p, .dominant-example-section h2 {
		margin-left: auto;
		margin-right: auto;
		max-width: 35rem;
	}
	
}



@media ( min-width: 68rem ) {
	
	article > * {
		grid-column: 2 / span 6;
	}
	
	figure > *:not(figcaption) {
		grid-column: 1 / span 8;
		margin: calc( var(--line-height) * 2 ) 0;
	}
	
	figcaption {
		align-self: center;
		grid-column: span 2;
		margin: 0;
	}
	
	article > code[class*=language-], article > pre[class*=language-], .code-block {
		grid-column: 1 / span 8;
		margin: calc( var(--line-height) * 1.5 ) 0 calc( var(--line-height) * 2 );
	}
	
	article > .code-block.code-example-good, article > .code-block.code-example-bad {
		grid-column: 1 / span 6;
		margin-top: calc( var(--line-height) * 2 );
		padding: 3rem 2rem;
	}
	
	article > .code-block.code-example-bad {
		grid-column-start: 7;
	}
		
	.big-point {
		grid-column: 2 / span 7;
	}
	
}

@media ( min-width: 1430px ) {
	
	main, .hero {
		margin: 0 auto 6rem;
	}
	
}

/* ==========================================================================
   Site Header
   ========================================================================== */

.site-header {
	border-bottom: 1px solid #ccc;
	padding: 2rem;
}

/* The theme toggle embedded in the TOC heading. Inline with the search
   icon — small, unobtrusive, no fixed positioning. */
.toc-theme-toggle {
	display: inline-flex;
	vertical-align: middle;
	width: 2rem;
	height: 2rem;
	margin: 0 0 0 0.25rem;
	border: 2px solid color-mix(in srgb, var(--color-orange, lightsalmon) 55%, transparent);
}
.toc-theme-toggle:hover,
.toc-theme-toggle:focus-visible {
	border-color: var(--color-orange, lightsalmon);
}

.logo {
	align-items: center;
	border: none;
	display: inline-flex;
	font-family: var(--font-secondary);
	line-height: 0;
}

.logo:hover, .logo:focus {
	color: var(--color-orange);
}

.logo-icon {
	fill: var(--color-orange-light);
	height: 1.5rem;
	margin-right: 1rem;
	vertical-align: bottom;
	width: 1.5rem;
}
	

/* ==========================================================================
   Table of Contents
   ========================================================================== */

.table-of-contents ul ul {
	margin: 0 0 1.5rem;
	padding: 0;
}

.table-of-contents ul ul li {
	display: inline-block;
	font-size: .8rem;
	margin: 0;
}

.table-of-contents ul ul li:after {
	content: '|';
	color: #ccc;
	margin-right: .25rem;
}

.table-of-contents ul ul li:last-child:after {
	content: '';
	margin: 0;
}

.table-of-contents ul ul a {
	margin-right: .25rem;
}

/* Index Page TOC */

body {
	counter-reset: my-awesome-counter;
}

.site-index .table-of-contents {
	max-width: 1100px;
	margin: auto;
}

.site-index .table-of-contents ul {
	list-style: none;
	padding: 0;
}

.site-index .table-of-contents section > ul > li {
	counter-increment: my-awesome-counter;
	margin-bottom: calc( var(--line-height) * 2 );
}

.site-index .table-of-contents section > ul > li:before {
	content: counter(my-awesome-counter, decimal-leading-zero);
	display: block;
	font-family: var(--font-secondary);
	font-size: var(--size-xxlarge);
	line-height: calc( var(--line-height) * 1.5 );
	margin-right: .5rem;
}

.site-index .table-of-contents ul ul {
	display: none;
}


@media ( min-width: 58rem ) {

	.site-index .table-of-contents section {
		display: grid;
		grid-gap: calc( var(--line-height) * 2 );
		grid-template-columns: repeat(12, 1fr);
	}
	
	.site-index .table-of-contents h3 {
		grid-column: span 12;
	}
	
	.site-index .table-of-contents section > ul {
		display: contents;
	}
	
	.site-index .table-of-contents section > ul > li {
		grid-column: span 4;
		list-style: none;
		margin-bottom: 0;
	}
	
}

/* ==========================================================================
   Article Header & Hero
   ========================================================================== */

article header, .hero {
	border-bottom: 1px solid #ccc;
	padding-bottom: calc( var(--line-height) * 2 );
}

@media ( min-width: 58rem ) {
	
	article header, .hero {
		align-content: center;
		display: grid;
		grid-column: 1 / span 12;
		grid-gap: var(--line-height);
		grid-template-columns: repeat( 12, 1fr );
		min-height: 80vh;
	}
	
	.hero {
		min-height: 98vh;
	}
	
	article header h1, .hero h1 {
		font-size: var(--size-xxxxlarge);
		grid-column: 1 / span 8;
		/*margin: 0;*/
	}
	
	article header p, .hero p {
		font-size: var(--size-large);
		font-weight: 100;
		grid-column: 1 / span 7;
		line-height: calc( var(--line-height) * 1.25 );
		margin: 0;
	}
	
	.page-nav {
		align-self: start;
		border-left: 1px solid #ccc;
		grid-column: 8 / span 3;
		grid-row: 2 / span 2;
		padding-left: var(--line-height);
	}
	
}

@media ( min-width: 78rem ) {
	
	article header h1, .hero h1 {
		grid-column: 2 / span 7;
	}
	
	article header p, .hero p {
		grid-column: 2 / span 6;
	}
	
}

/* ==========================================================================
   Article Nav
   ========================================================================== */

.page-nav h2 {
	font-size: var(--size-large);
	color: var(--color-text);
	line-height:  var(--line-height);
	margin-bottom:  calc( var(--line-height) / 2);
	margin-top: 0;
	padding: 0;
}

.page-nav a {
	display: block;
}

/* ==========================================================================
   Reference Index
   ========================================================================== */

.index-section {
	border: none;
	grid-column: 2 / span 5;
	margin: 0;
	padding: 0;
}

.index-section:nth-of-type(3) {
	grid-column: 8 / span 5;
	grid-row: 2 / span 2;
}

.index-section h2 {
	padding: 0;
}

/* ==========================================================================
   Site Footer
   ========================================================================== */

.licence {
	border-top: 1px solid #ccc;
    color: var(--color-text);
    font-size: var(--size-small);
    margin: 2rem auto 0;
    padding: 2rem 0;
    max-width: 1100px;
}

.site-footer nav {
	background-color: var(--color-toc-background);
	color: var(--color-toc-text); /* added to control ToC separately */
	border-top: 1px solid #ccc;
	font-size: .8rem;
	margin-top: 8rem;
	padding: 2rem;
}

.site-footer nav a:link,
.site-footer nav a:visited,
.site-footer nav a:hover,
.site-footer nav a:active {
    color: var(--color-toc-text);
}

.site-footer nav h1,
.site-footer nav h2,
.site-footer nav h3,
.site-footer nav h4,
.site-footer nav h5 {
    color: var(--color-toc-headings);
}

.site-footer nav, .site-footer h2 {
	margin: 2rem auto;
	max-width: 35rem;
}

.menu-toggle {
	background-color: transparent;
	border: none;
	color: var(--color-orange);
	cursor: pointer;
	display: none;
}

.menu-toggle:focus {
	outline: none;
}

.menu-toggle:focus .icon {
	stroke: var(--color-orange);
}

.icon-x, .icon-burger {
	transition: all .4s ease-out;
}

.icon-x {
	opacity: 0;
}

.menu-toggle {
	transition: all .4s;
}

.isOpen .menu-toggle {
	transform: rotate(180deg);
}

.isOpen .icon-burger {
	opacity: 0;
}

.isOpen .icon-burger line {
	transition: all .5s;
}

.isOpen .icon-burger line:first-child {
	transform: translatey(.3rem);
}

.isOpen .icon-burger line:last-child {
	transform: translatey(-.3rem);
}

.isOpen .icon-x {
	opacity: 1;
}

@media ( min-width: 39rem ) {
	
	.menu-toggle {
		display: block;
		right: 1rem;
		position: fixed;
		top: 1.8rem;
		z-index: 2;
	}
	
	.site-footer {
		margin-top: 0;
	}
	
	.site-footer nav {
		background-color: transparent;
		border: none;
		font-size: .9rem;
		height: 100vh;
		right: 0;
		margin-top: 0;
		overflow-x: visible;
		overflow-y: scroll;
		padding: 3rem 5rem;
		position: fixed;
		top: 0;
		transform: translatex( 36rem );
		width: 36rem;
	}
	
	.isOpen.site-footer nav {
		animation: slide-in .4s ease-out;
		background-color: var(--color-toc-background);
		box-shadow: 0 5px 10px rgba( 0, 0, 0, .5 );
		transform: translatex( 0 );
	}
	
	.isOpen.site-footer:before {
		content: '';
		background-color: rgba( 0, 0, 0, .3 );
		bottom: 0;
		display: block;
		left: 0;
		position: fixed;
		right: 0;
		top: 0;
	}
	
	.site-footer h2 {
		margin: 4rem 0 0;
		padding-top: 0;
	}
	
}

@keyframes slide-in {

	0% {
		background-color: transparent;
		box-shadow: 0 5px 10px rgba( 0, 0, 0, 0 );
		transform: translatex( 30rem );
	}
	
	100% {
		background-color: var(--color-toc-background);
		box-shadow: 0 5px 10px rgba( 0, 0, 0, .5 );
		transform: translatex( 0 );
	}

}

/* ==========================================================================
	Pen Demo
   ==========================================================================*/

.pen-demo {
	background-color: #e6efff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	display: flex;
}

.pen-code-tabs {
	width: 100%;
}

.pen-live-code-area {
	position: relative;
	width: 50%;
}

.pen-tab-select {
	margin: 0;
	padding: 0;
}

.pen-tab-select li {
	display: inline-block;
	margin: 0;
}

.pen-tab-select li a {
	background-color: #cfe1ff;
	border: none;
	color: var(--color-blue-dark);
	display: inline-block;
	font-size: .9rem;
	padding: .5rem 1rem;
	text-decoration: none;
}

.pen-tab-select li a:hover, .pen-tab-select li a:focus {
	background-color: var(--color-blue-medium);
	color: white;
	outline: none;
}

.pen-tab-select li a.active-tab {
	background-color: cornflowerblue;
	color: white;
}

.pen-reset-button {
	background-color: white;
	border: none;
	border-radius: 0;
	color: var(--color-blue-dark);
	cursor: pointer;
	font-size: .8rem;
	line-height: 1.5;
	padding: .45rem .65rem;
	position: absolute;
	right: .35rem;
	top: .2rem;
}

.pen-reset-button:hover, .pen-reset-button:focus {
	background-color: var(--color-blue-medium);
	color: white;
	outline: none;
}

.pen-reset-button:active {
	background-color: cornflowerblue;
	color: white;
}

.pen-work-area-label {
	background-color: cornflowerblue;
	color: white;
	display: inline-block;
	font-family: var(--font-primary);
	font-size: .9rem;
	font-weight: normal;
	line-height: 1.7;
	margin: 0;
	padding: .5rem 1rem;
}

.pen-demo .CodeMirror{
	border: 1px solid #cad7ec;
	border-top-color: cornflowerblue;
	box-sizing: border-box;
	height: 50vh;
	min-height: 30rem;
	padding: 1rem 0 0 1rem;
	width: 100%;
}

.pen-rendering-area {
	line-height: 0;
	width: 50%;
}

.pen-rendering {
	background-color: white;
	border: 1px solid #cad7ec;
	border-top-color: cornflowerblue;
	border-left-width: 0;
	box-sizing: border-box;
	height: 50vh;
	min-height: 30rem;
	overflow-y: auto;
	resize: horizontal;
	width: 100%;
}


/* ==========================================================================
   Code Examples
   ========================================================================== */

p > code,
li > code,
dd > code,
td > code,
small > code,
strong > code {
	background-color: #f5f2f0;
	color: #905;
	display: inline-block;
	font-weight: normal;
	margin: 0 .2rem;
	padding: 0 .25rem;
}

small > code {
	margin: 0 .1rem;
	padding: 0 .125rem;
}

figcaption > code {
	background-color: #f5f2f0;
	color: #905;
	padding: .2rem;
}

:not(pre)>code[class*=language-], pre[class*=language-] {
	background-color: var(--color-gray-bg);
}

code[class*=language-],
pre[class*=language-] {
	overflow-wrap: break-word;
	white-space: pre-wrap;
}

pre[class*=language-]{
	margin: 3rem 0 3rem;
	overflow: visible;
}

.code-block {
	background-color: var(--code-background-color); 
	padding: 4rem 2rem 3rem;
}

.code-block .CodeMirror {
	background-color: var(--code-mirror-background-color);
	height: auto;
	color: var(--code-color);
}

.code-block .cm-s-default .cm-comment, .pen-demo .cm-s-default .cm-comment {
	color: var(--code-comment);
	font-style: italic;
}

.code-block .cm-s-default .cm-qualifier, .pen-demo .cm-s-default .cm-qualifier {
	color: var(--code-selector);
}

pre > code {
	white-space: pre-wrap;
}

pre.language-markup, pre.language-css, .code-block.htmlmixed, .code-block.css {
	padding-top: 4rem;
	position: relative;
}

pre.language-markup:before, pre.language-css:before, .code-block.htmlmixed:before, .code-block.css:before {
	content: 'HTML';
	background-color: var(--color-orange);
	color: white;
	display: block; 
	left: 0rem;
	padding: .25rem .5rem;
	position: absolute;
	right: 0;
	top: 0;
}

pre.language-css:before, .code-block.css:before {
	content: 'CSS';
	background-color: #7599db;
}

.code-block.code-example-good {
	border-top: calc( var(--line-height) / 8 ) solid rgb(102, 153, 0);
}

.code-block.code-example-bad {
	border-top: calc( var(--line-height) / 8 ) solid indianred;
}

.code-block.code-example-good:before, .code-block.code-example-bad:before {
	content: 'Good';
	background-color: transparent;
	color: rgb(102, 153, 0);
	font-size: var(--size-large);
	font-weight: bold;
	top: calc( var(--line-height) * -1.5 );
}

.code-block.code-example-bad:before {
	content: 'Bad';
	color: indianred;
}

.cp_embed_wrapper {
	background: #eaf1fd;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	height: 400px;
	overflow: hidden;
	padding-bottom: 10px;
	resize: both;
}

.pen-demo {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.cp_embed_wrapper iframe {
  height: 100% !important;
}

@media ( min-width: 39rem ) {
	
	pre[class*=language-] {
		margin: 3rem 0;
		padding: 3.5rem 1.5rem 1.5rem;
	}
	
	.cp_embed_wrapper, .pen-demo {
		margin: 3rem 0;
	}
	
	.dominant-example .cp_embed_wrapper {
		margin: 3rem 0;
	}
	
}

@media ( min-width: 50rem ) {
	
	pre[class*=language-] {
		padding: 4rem 2rem 3rem;
	}
	
	.cp_embed_wrapper {
		height: 450px;
		margin: var(--line-height) 0 calc( var(--line-height) * 3 );
	}

	.pen-demo {
		margin: var(--line-height) 0 calc( var(--line-height) * 3 );
	}
	
	.dominant-example.cp_embed_wrapper {
		margin: 3rem 0 5rem;
	}
	
}

@media ( min-width: 70rem ) {
	
	.cp_embed_wrapper {
		height: 500px;
	}
	
}

@media ( min-width: 80rem ) {
	
	.cp_embed_wrapper {
		height: 550px;
	}
	
}

.video-demo {
	margin-top: 2rem;
	overflow: hidden;
	padding-top: 85vh;
	position: relative;
}

.video-demo iframe {
	border: none;
	height: 80%;
	left: 0;
	min-height: 80vh;
	position: absolute;
	top: 0;
	width: 100%;
}

.lesson-quiz iframe {
	border: none;
	box-shadow:
		0 1.1px 0.7px -2px rgba(0, 0, 0, 0.024),
		0 3px 1.9px -2px rgba(0, 0, 0, 0.035),
		0 7.2px 4.5px -2px rgba(0, 0, 0, 0.046),
		0 24px 15px -2px rgba(0, 0, 0, 0.07);
	height: 100%;
	min-height: 80vh;
	width: 100%;
}

@media ( max-height: 900px ) {

	.lesson-quiz iframe {
		min-height: 55rem;
	}
	
}

.quiz-link {
	display: block;
	margin: calc( var(--line-height) / 2 ) 0 calc( var(--line-height) / 2 );
	text-align: right;
}

.quiz-link {
	vertical-align: text-bottom;
}

/* ==========================================================================
   Checklist
   ========================================================================== */

form > div {
	align-items: baseline;
	display: flex;
	padding: calc( var(--line-height) / 4 ) 0;
}

input[type=checkbox]{
	margin-right: calc( var(--line-height) / 3 );
	transform: scale(1.2);
}

input:checked + label {
	color: gray;
	text-decoration: line-through;
}
/* =============================================================================
   Dark-mode fixes from a proper both-themes audit (originally I only ran
   axe in light mode — these defects were live in dark only).
   ============================================================================= */

/* WCAG 1.4.3 — .try-this callouts in dark mode had #bcbcbc text on #777 bg
   (2.35:1, fail). Use the dark-surface palette instead. Two separate
   rules — combining a regular selector with a @media block in one
   comma-list is invalid CSS and silently drops the whole rule. */
:root[data-theme="dark"] .try-this {
	background-color: #242424;
	color: #e8e8e8;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .try-this {
		background-color: #242424;
		color: #e8e8e8;
	}
}

/* WCAG 1.4.1 — prose links in dark mode are similar enough in luminance to
   the body text that axe's link-in-text-block rule (correctly) flags them
   as color-only distinction. Underline links inside article/main prose
   so they're distinguishable without relying on hue alone. */
article p a,
article li a,
article dd a,
article dt a,
article td a,
article figcaption a,
main p a,
main li a,
main dd a,
main td a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
article p a:hover,
article li a:hover,
article td a:hover,
main p a:hover,
main li a:hover,
main td a:hover {
	text-decoration-thickness: 2px;
}

/* WCAG 1.4.3 — table-row zebra striping uses --color-blue-light, which in
   dark mode resolves to #4f6388 (medium luminance). Links on that bg drop
   below AA contrast. Use a much darker stripe color in dark mode so the
   existing salmon link color stays at ~10:1 (AAA). */
:root[data-theme="dark"] tr:nth-child(2n) {
	background-color: #2a2a2a;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) tr:nth-child(2n) {
		background-color: #2a2a2a;
	}
}

/* === COMMAND-PALETTE-CSS:START (managed by build.js, do not edit between markers) === */
/* =============================================================================
   Command Palette (⌘K / Ctrl-K)
   Visual language inspired by the PHACKTS Local Search palette.
   ============================================================================= */

/* Theme tokens — these inherit/fall back to the guidebook's existing palette.
   If a token isn't defined we provide a reasonable default so the palette
   still looks consistent on lesson pages that don't load the dark stylesheet. */
.cp-root {
	--cp-brand:        var(--color-orange, lightsalmon);
	--cp-brand-soft:   color-mix(in srgb, var(--cp-brand) 18%, transparent);
	--cp-brand-fade:   color-mix(in srgb, var(--cp-brand) 8%, transparent);
	--cp-surface:      var(--color-background, #fff);
	--cp-surface-alt:  color-mix(in srgb, var(--cp-surface) 88%, #777 12%);
	--cp-text:         var(--color-text, #111);
	--cp-text-muted:   color-mix(in srgb, var(--cp-text) 55%, transparent);
	--cp-border:       color-mix(in srgb, var(--cp-text) 12%, transparent);
	--cp-shadow:       0 25px 50px -12px rgba(0, 0, 0, 0.4);
	--cp-backdrop:     rgba(15, 23, 42, 0.88);

	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 1rem 0.75rem;
	font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
}
@media (min-width: 640px) {
	.cp-root {
		padding-top: 15vh;
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

@media (prefers-color-scheme: dark) {
	.cp-root {
		--cp-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
	}
}

/* Backdrop */
.cp-backdrop {
	position: absolute;
	inset: 0;
	background: var(--cp-backdrop);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* Panel */
.cp-panel {
	position: relative;
	width: 100%;
	max-width: 42rem;
	display: flex;
	flex-direction: column;
	max-height: calc(100dvh - 2rem);
	overflow: hidden;
	border-radius: 2rem;
	background: var(--cp-surface);
	border: 1px solid var(--cp-border);
	box-shadow: var(--cp-shadow);
}
@media (min-width: 640px) {
	.cp-panel { max-height: 75vh; }
}

/* Header (search input row) */
.cp-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1.1rem 1rem;
	border-bottom: 1px solid var(--cp-border);
	background: color-mix(in srgb, var(--cp-surface) 92%, var(--cp-text) 8%);
	flex-shrink: 0;
}
@media (min-width: 640px) {
	.cp-header { gap: 1rem; padding: 1.25rem 1.5rem; }
}

.cp-search-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--cp-brand);
	flex-shrink: 0;
}
.cp-search-icon svg { width: 1.5rem; height: 1.5rem; animation: cp-pulse 2.4s ease-in-out infinite; }

@keyframes cp-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.55; }
}

.cp-input {
	flex: 1 1 0;
	min-width: 0;
	background: transparent;
	border: 0;
	font: 500 1rem/1.2 inherit;
	color: var(--cp-text);
	outline: none;
	padding: 0.25rem 0;
}
@media (min-width: 640px) {
	.cp-input { font-size: 1.125rem; }
}
.cp-input::placeholder {
	color: var(--cp-text-muted);
}

.cp-esc {
	flex-shrink: 0;
	padding: 0.35rem 0.65rem;
	font: 900 0.625rem/1 'Open Sans', system-ui, sans-serif;
	color: var(--cp-brand);
	background: var(--cp-brand-fade);
	border: 1px solid color-mix(in srgb, var(--cp-brand) 40%, transparent);
	border-radius: 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	cursor: pointer;
	transition: background-color .15s ease;
}
.cp-esc:hover { background: var(--cp-brand-soft); }

/* Results list */
.cp-results {
	flex: 1 1 auto;            /* not 0 — basis must be auto so content height */
	min-height: 0;             /* contributes to the panel's intrinsic size,   */
	overflow-y: auto;          /* otherwise the panel collapses to just the   */
	padding: 0.75rem;          /* header + footer and clips the result list.  */
	display: block;            /* plain block stacking; items get margin-top  */
	background: color-mix(in srgb, var(--cp-surface) 96%, var(--cp-text) 4%);
}
.cp-result + .cp-result { margin-top: 0.25rem; }

/* Custom scrollbar to match the panel aesthetic */
.cp-results { scrollbar-width: thin; scrollbar-color: var(--cp-border) transparent; }
.cp-results::-webkit-scrollbar { width: 8px; }
.cp-results::-webkit-scrollbar-track { background: transparent; }
.cp-results::-webkit-scrollbar-thumb {
	background: var(--cp-border);
	border-radius: 999px;
}

.cp-result {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding: 0.85rem 1rem;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 1rem;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.cp-result:hover {
	background: color-mix(in srgb, var(--cp-text) 4%, transparent);
}
.cp-result.is-active {
	background: var(--cp-brand-fade);
	border-color: color-mix(in srgb, var(--cp-brand) 35%, transparent);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

.cp-result-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	flex-shrink: 0;
	border-radius: 0.75rem;
	background: color-mix(in srgb, var(--cp-surface) 80%, var(--cp-text) 20%);
	color: var(--cp-text-muted);
	border: 1px solid var(--cp-border);
	transition: background-color .15s, color .15s, border-color .15s;
}
.cp-result-icon svg { width: 1.1rem; height: 1.1rem; }
.cp-result.is-active .cp-result-icon {
	background: var(--cp-brand);
	color: white;
	border-color: color-mix(in srgb, var(--cp-brand) 60%, transparent);
	box-shadow: 0 6px 16px -6px var(--cp-brand);
}

.cp-result-body { flex: 1 1 0; min-width: 0; }
.cp-result-title {
	font: 700 0.95rem/1.25 'Libre Baskerville', Georgia, serif;
	color: var(--cp-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cp-result-title mark {
	background: color-mix(in srgb, var(--cp-brand) 35%, transparent);
	color: inherit;
	padding: 0 1px;
	border-radius: 2px;
}
.cp-result-desc {
	margin-top: 2px;
	font: 500 0.72rem/1.3 'Open Sans', sans-serif;
	color: var(--cp-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cp-result-arrow {
	flex-shrink: 0;
	color: var(--cp-brand);
	opacity: 0;
	transition: opacity .2s ease;
}
.cp-result-arrow svg { width: 1.25rem; height: 1.25rem; }
.cp-result.is-active .cp-result-arrow { opacity: 1; }

/* Empty / no-results state */
.cp-empty {
	flex: 1 1 auto;
	min-height: 8rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3rem 1rem;
	text-align: center;
	background: color-mix(in srgb, var(--cp-surface) 96%, var(--cp-text) 4%);
}
.cp-empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 1rem;
	background: color-mix(in srgb, var(--cp-surface) 85%, var(--cp-text) 15%);
	border: 1px solid var(--cp-border);
	color: var(--cp-text-muted);
	margin-bottom: 1rem;
}
.cp-empty-icon svg { width: 1.5rem; height: 1.5rem; }
.cp-empty-msg {
	font: 700 0.875rem/1.4 'Open Sans', sans-serif;
	color: var(--cp-text-muted);
	margin: 0;
}
.cp-empty-sub {
	font: 500 0.7rem/1.4 'Open Sans', sans-serif;
	color: color-mix(in srgb, var(--cp-text-muted) 70%, transparent);
	margin: 0.4rem 0 0;
}

/* Footer (keyboard hints + brand) */
.cp-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	background: color-mix(in srgb, var(--cp-surface) 92%, var(--cp-text) 8%);
	border-top: 1px solid var(--cp-border);
	flex-shrink: 0;
}
@media (min-width: 640px) {
	.cp-footer { padding: 1.1rem 1.5rem; }
}

.cp-hints {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}
@media (min-width: 640px) { .cp-hints { gap: 2rem; } }
.cp-hint {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font: 900 0.625rem/1 'Open Sans', sans-serif;
	color: var(--cp-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}
.cp-kbd {
	display: inline-block;
	padding: 0.25rem 0.5rem;
	border-radius: 0.5rem;
	background: var(--cp-surface);
	border: 2px solid var(--cp-border);
	box-shadow: 0 1px 2px rgba(0,0,0,0.06);
	font: 900 0.7rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
	color: var(--cp-text-muted);
}

.cp-brand {
	display: none;
	align-items: center;
	gap: 0.5rem;
	font: 900 0.625rem/1 'Open Sans', sans-serif;
	color: color-mix(in srgb, var(--cp-brand) 50%, transparent);
	text-transform: uppercase;
	letter-spacing: 0.18em;
}
@media (min-width: 640px) { .cp-brand { display: inline-flex; } }
.cp-dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--cp-brand) 50%, transparent);
	animation: cp-blink 1.6s ease-in-out infinite;
}
@keyframes cp-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.3; }
}

/* Open/close transition */
.cp-fade-enter-active, .cp-fade-leave-active {
	transition: opacity 0.18s ease;
}
.cp-fade-enter, .cp-fade-leave-to {
	opacity: 0;
}
.cp-fade-enter-active .cp-panel, .cp-fade-leave-active .cp-panel {
	transition: transform 0.22s ease, opacity 0.22s ease;
}
.cp-fade-enter .cp-panel, .cp-fade-leave-to .cp-panel {
	opacity: 0;
	transform: translateY(-12px) scale(0.98);
}

/* =============================================================================
   ⌘K hint badge — drop this anywhere with class="cp-shortcut-badge".
   Used in the page-header / TOC search button for the cloverleaf visualization.
   ============================================================================= */
.cp-shortcut-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.2rem 0.45rem;
	margin-left: 0.5rem;
	border-radius: 0.4rem;
	background: var(--cp-brand-fade, color-mix(in srgb, var(--color-orange, lightsalmon) 8%, transparent));
	border: 1px solid color-mix(in srgb, var(--color-orange-dark, #c84412) 45%, transparent);
	color: var(--color-orange-dark, #c84412);
	font: 900 0.625rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	user-select: none;
	/* Center the badge against the cap-height of the surrounding text instead
	   of sitting on the baseline — without this it drops awkwardly low next
	   to serif body copy. */
	vertical-align: middle;
	position: relative;
	top: -0.08em;
}
.cp-shortcut-badge .cp-clover {
	font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	font-size: 0.95em;
}

/* =============================================================================
   Theme overrides — manual data-theme="..." beats the OS @media preference.
   Mirrors the @media (prefers-color-scheme: dark) block in style.css so the
   user's explicit choice wins regardless of system setting.
   ============================================================================= */
:root[data-theme="dark"] {
	--color-text:               white;
	--color-background:         black;
	--color-blue-light:         #4f6388;
	--color-blue-lighter:       #f7faff;
	--color-blue-dark:          #F0F5FD;
	--color-orange:             #eb4f0a;
	--color-orange-dark:        #ffc2aa;
	--color-orange-light:       #ff7038;
	--color-try-this:           #bcbcbc;
	--color-cclicense:          #bf7f6f;
	--color-toc-background:     #505050;
	--color-toc-text:           white;
	--color-toc-meta:           #ffc8ad;
	--color-toc-headings:       #d8d8d8;
	--color-gray-bg:            #777;
	--code-background-color:    #faf9fb;
	--code-mirror-background-color: transparent;
	--code-color:               black;
}
:root[data-theme="dark"] .cp-root {
	--cp-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

/* `data-theme="light"` re-asserts the light defaults even when the OS prefers
   dark. Values mirror :root in style.css. */
:root[data-theme="light"] {
	--color-text:               black;
	--color-background:         white;
	--color-blue-light:         #F0F5FD;
	--color-blue-lighter:       #f7faff;
	--color-blue-dark:          #4f6388;
	--color-orange:             lightsalmon;
	--color-orange-dark:        #b03c10;
	--color-orange-light:       #ffc2aa;
	--color-try-this:           #4f6388;
	--color-cclicense:          #9f5f4f;
}

/* =============================================================================
   Theme toggle button (sun/moon) — placed next to the search icon in the TOC.
   ============================================================================= */
.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 0.5rem;
	padding: 0.25rem;
	width: 2.25rem;
	height: 2.25rem;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: inherit;
	cursor: pointer;
	vertical-align: middle;
	transition: background-color .15s ease, color .15s ease;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
	background: color-mix(in srgb, currentColor 12%, transparent);
	outline: none;
}
.theme-toggle-icon {
	width: 1.5rem;
	height: 1.5rem;
	display: block;
}

/* =============================================================================
   Floating theme toggle — sits next to the hamburger menu button in the
   site-footer. Always visible on every page; doesn't require opening the
   TOC drawer.
   ============================================================================= */
.floating-theme-toggle {
	position: fixed;
	right: 4rem;        /* sits to the left of the hamburger (right: 1rem) */
	top: 1.4rem;
	z-index: 91;        /* above .menu-toggle (z-index 2) but below palette */
	width: 2.5rem;
	height: 2.5rem;
	margin: 0;          /* override .theme-toggle's default margin */
	background: var(--color-background, white);
	border: 2px solid color-mix(in srgb, var(--color-orange, lightsalmon) 55%, transparent);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	color: var(--color-orange, lightsalmon);
}
.floating-theme-toggle:hover,
.floating-theme-toggle:focus-visible {
	background: color-mix(in srgb, var(--color-orange, lightsalmon) 12%, var(--color-background, white));
	border-color: var(--color-orange, lightsalmon);
}
:root[data-theme="dark"] .floating-theme-toggle,
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .floating-theme-toggle {
		background: color-mix(in srgb, var(--color-background, black) 92%, #fff 8%);
	}
}

/* Mobile (no hamburger shown — hamburger only appears at 39rem+): the
   floating theme toggle would overlap the site title. Hide it on mobile;
   the in-TOC theme toggle (top of the table-of-contents nav) takes over,
   which on mobile sits inline at the bottom of every page. */
@media (max-width: 39rem) {
	.floating-theme-toggle {
		display: none;
	}
}

/* =============================================================================
   Accessibility helpers
   ============================================================================= */
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Skip-to-content link revealed on focus (rendered by each page).
   See main.js which injects this link at the start of body. */
.skip-link {
	position: absolute;
	left: -10000px;
	top: 0;
	padding: 0.75rem 1rem;
	background: var(--color-background, white);
	color: var(--color-orange, lightsalmon);
	border: 2px solid var(--color-orange, lightsalmon);
	border-radius: 0 0 0.5rem 0;
	font-weight: 700;
	text-decoration: none;
	z-index: 9999;
}
.skip-link:focus {
	left: 0;
	outline: none;
}

/* Consistent visible focus ring on all interactive elements that don't already
   manage their own. We use :focus-visible so mouse clicks don't show a ring.
   Use the accessible link color so the ring contrasts with both themes. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--color-orange-dark, #c84412);
	outline-offset: 2px;
}

/* =============================================================================
   Code blocks — ALWAYS dark, MDN-style, regardless of page theme.
   Code is its own visual unit (like in a developer's editor), so we use a
   permanent dark slate background with bright-but-not-eye-searing token
   colors, all WCAG-AA compliant against #1b1b1b.
   ============================================================================= */
:root {
	/* Code editor palette. Override in one place to retheme everything. */
	--code-bg:        #1b1b1b;
	--code-fg:        #f9f9fb;
	--code-comment:   #909090;
	--code-tag:       #ff8b8b;
	--code-keyword:   #ff9b5e;
	--code-string:    #80c8f8;
	--code-number:    #fbb45c;
	--code-attribute: #92a3f1;
	--code-property:  #8cc4ff;
	--code-selector:  #ff9b5e;
	--code-error:     #ff6b6b;
}

/* Wrapper background — applies to <code-block> (the static example component).
   The .pen-demo live-editor widget is intentionally NOT included: its
   preview iframe needs to render real browser defaults. */
.code-block,
.code-block .CodeMirror {
	background: var(--code-bg) !important;
	color: var(--code-fg) !important;
	border-color: #2a2a2a !important;
}
.code-block .CodeMirror-gutters{
	background: var(--code-bg) !important;
	border-right: 1px solid #2a2a2a !important;
	color: var(--code-comment) !important;
}
.code-block .CodeMirror-linenumber{
	color: var(--code-comment) !important;
}
.code-block .CodeMirror-cursor{
	border-left-color: var(--code-fg) !important;
}
.code-block .CodeMirror-selected,
.code-block .CodeMirror-focused .CodeMirror-selected{
	background: rgba(146, 163, 241, 0.22) !important;
}
.code-block .CodeMirror-activeline-background{
	background: rgba(255, 255, 255, 0.03) !important;
}

/* Syntax token colors — MDN-inspired. Scoped to .code-block / .pen-demo so
   this never interferes with the search-palette UI or anywhere else.
   The intermediate `.CodeMirror` class is included to bump specificity past
   CodeMirror's runtime-injected `.cm-s-default .cm-X` rules. */
.code-block .CodeMirror .cm-tag{ color: var(--code-tag); }
.code-block .CodeMirror .cm-attribute{ color: var(--code-attribute); }
.code-block .CodeMirror .cm-string,
.code-block .CodeMirror .cm-string-2{ color: var(--code-string); }
.code-block .CodeMirror .cm-comment{ color: var(--code-comment); font-style: italic; }
.code-block .CodeMirror .cm-keyword{ color: var(--code-keyword); }
.code-block .CodeMirror .cm-property{ color: var(--code-property); }
.code-block .CodeMirror .cm-number{ color: var(--code-number); }
.code-block .CodeMirror .cm-qualifier{ color: var(--code-selector); }
.code-block .CodeMirror .cm-bracket{ color: var(--code-fg); }
.code-block .CodeMirror .cm-meta{ color: var(--code-attribute); }
.code-block .CodeMirror .cm-builtin{ color: var(--code-property); }
.code-block .CodeMirror .cm-variable{ color: var(--code-fg); }
.code-block .CodeMirror .cm-variable-2{ color: var(--code-string); }
.code-block .CodeMirror .cm-variable-3{ color: var(--code-property); }
.code-block .CodeMirror .cm-def{ color: var(--code-attribute); }
.code-block .CodeMirror .cm-atom{ color: var(--code-keyword); }
.code-block .CodeMirror .cm-operator{ color: var(--code-tag); }
.code-block .CodeMirror .cm-header{ color: var(--code-attribute); }
.code-block .CodeMirror .cm-error{ color: var(--code-error); background: rgba(255, 107, 107, 0.15); }

/* Prism-highlighted <pre><code class="language-X">...</code></pre> blocks
   (used on a few legacy pages). Same dark background, same color family. */
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background-color: var(--code-bg) !important;
	color: var(--code-fg) !important;
}
pre[class*="language-"] .token.tag,
pre[class*="language-"] .token.selector       { color: var(--code-tag); }
pre[class*="language-"] .token.attr-name      { color: var(--code-attribute); }
pre[class*="language-"] .token.attr-value,
pre[class*="language-"] .token.string         { color: var(--code-string); }
pre[class*="language-"] .token.comment        { color: var(--code-comment); font-style: italic; }
pre[class*="language-"] .token.keyword        { color: var(--code-keyword); }
pre[class*="language-"] .token.property       { color: var(--code-property); }
pre[class*="language-"] .token.number         { color: var(--code-number); }
pre[class*="language-"] .token.punctuation    { color: var(--code-fg); }
pre[class*="language-"] .token.operator       { color: var(--code-tag); }

/* prefers-reduced-motion: respect user preference. */
@media (prefers-reduced-motion: reduce) {
	.cp-fade-enter-active, .cp-fade-leave-active,
	.cp-fade-enter-active .cp-panel, .cp-fade-leave-active .cp-panel,
	.cp-search-icon svg, .cp-dot {
		transition: none !important;
		animation: none !important;
	}
}

/* Current page indicator in the TOC — set via aria-current="page" by the
   TOC's mounted() hook. Accessible to screen readers; visual underline +
   weight for sighted users. */
.table-of-contents a[aria-current="page"] {
	font-weight: 800;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Inline <code> in prose — applied so EVERY code surface (inline + block)
   shares the same dark MDN slate. The original style.css gives inline code
   a cream `#f5f2f0` pill with magenta text; this override makes inline
   code consistent with the block code-block / pen-demo treatment.
   Original layout (display:inline-block, margin, small padding) is kept. */
p > code,
li > code,
dd > code,
td > code,
small > code,
strong > code,
figcaption > code,
pre > code {
	background-color: var(--code-bg) !important;
	color: var(--code-fg) !important;
	border-radius: 0.25rem;
}



/* =============================================================================
   pen-demo EDITOR chrome — always-dark, regardless of page theme.
   This styles the LEFT side of the widget (code editor + tabs + reset
   button) and the chrome around the iframe (the "What Users See" label,
   the container background). The iframe itself is deliberately untouched
   — it shows the student's HTML rendered with real browser defaults
   (white background, default form controls) which is what their
   deployed site will actually look like.
   ============================================================================= */
.pen-demo {
	background-color: #1b1b1b !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.pen-tab-select li a {
	background-color: #2a2a2a;
	color: #c9c9c9;
}
.pen-tab-select li a:hover,
.pen-tab-select li a:focus {
	background-color: #3a3a3a;
	color: #f9f9fb;
}
.pen-tab-select li a.active-tab {
	background-color: #1b1b1b;
	color: #f9f9fb;
	border-bottom: 2px solid var(--code-keyword, #ff9b5e);
}
.pen-reset-button {
	background-color: transparent;
	color: #c9c9c9;
	border-radius: 0.25rem;
}
.pen-reset-button:hover,
.pen-reset-button:focus {
	background-color: #3a3a3a;
	color: #f9f9fb;
}
.pen-reset-button:active {
	background-color: var(--code-keyword, #ff9b5e);
	color: #1b1b1b;
}
.pen-work-area-label {
	background-color: #2a2a2a;
	color: #c9c9c9;
}

/* CodeMirror inside the pen-demo gets the same dark MDN treatment as
   <code-block> elements. Same selectors as the .code-block rules above,
   but scoped here so the iframe wrapper isn't affected. */
.pen-demo .CodeMirror {
	background: var(--code-bg) !important;
	color: var(--code-fg) !important;
	border-color: #2a2a2a !important;
	border-top-color: #2a2a2a !important;
}
.pen-demo .CodeMirror-gutters {
	background: var(--code-bg) !important;
	border-right: 1px solid #2a2a2a !important;
	color: var(--code-comment) !important;
}
.pen-demo .CodeMirror-linenumber { color: var(--code-comment) !important; }
.pen-demo .CodeMirror-cursor { border-left-color: var(--code-fg) !important; }
.pen-demo .CodeMirror-selected,
.pen-demo .CodeMirror-focused .CodeMirror-selected {
	background: rgba(146, 163, 241, 0.22) !important;
}
.pen-demo .CodeMirror .cm-tag        { color: var(--code-tag); }
.pen-demo .CodeMirror .cm-attribute  { color: var(--code-attribute); }
.pen-demo .CodeMirror .cm-string,
.pen-demo .CodeMirror .cm-string-2   { color: var(--code-string); }
.pen-demo .CodeMirror .cm-comment    { color: var(--code-comment); font-style: italic; }
.pen-demo .CodeMirror .cm-keyword    { color: var(--code-keyword); }
.pen-demo .CodeMirror .cm-property   { color: var(--code-property); }
.pen-demo .CodeMirror .cm-number     { color: var(--code-number); }
.pen-demo .CodeMirror .cm-qualifier  { color: var(--code-selector); }
.pen-demo .CodeMirror .cm-bracket    { color: var(--code-fg); }
.pen-demo .CodeMirror .cm-meta       { color: var(--code-attribute); }
.pen-demo .CodeMirror .cm-builtin    { color: var(--code-property); }
.pen-demo .CodeMirror .cm-variable   { color: var(--code-fg); }
.pen-demo .CodeMirror .cm-variable-2 { color: var(--code-string); }
.pen-demo .CodeMirror .cm-def        { color: var(--code-attribute); }
.pen-demo .CodeMirror .cm-atom       { color: var(--code-keyword); }
.pen-demo .CodeMirror .cm-operator   { color: var(--code-tag); }

/* =============================================================================
   WCAG 2.2 a11y additions (2nd-pass audit)
   ============================================================================= */

/* 1.4.1 Use of Color: links inside .big-point paragraphs were color-only.
   Add underline so they're distinguishable in monochrome/forced-colors mode. */
.big-point a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* 1.4.3/1.4.6 Contrast: pen-demo CodeMirror was missing the cm-variable-3
   override (only had -2). The default CodeMirror blue (#085) fails contrast
   on the dark slate, so add the missing rules using the same MDN palette. */
.pen-demo .CodeMirror .cm-variable-3 { color: var(--code-property); }
.pen-demo .CodeMirror .cm-qualifier  { color: var(--code-selector); }
.pen-demo .CodeMirror .cm-builtin    { color: var(--code-property); }
.pen-demo .CodeMirror .cm-header     { color: var(--code-attribute); }
.pen-demo .CodeMirror .cm-error      { color: var(--code-error); background: rgba(255, 107, 107, 0.15); }

/* WCAG 2.4.7 / 2.4.11 / 2.4.13: ensure CodeMirror's scrollable region can
   be focused via keyboard (axe's scrollable-region-focusable rule). The
   inner textarea handles input, but the outer scroll region needs to be
   reachable for screen-reader review modes. */
.CodeMirror-scroll {
	tabindex: 0;  /* CSS can't set tabindex; this is a marker for the JS hook below */
}

/* =============================================================================
   pen-demo click-to-reveal preview overlay
   -----------------------------------------------------------------------------
   The iframe rendering pane sits inside a dark wrapper with a button.
   The iframe's own srcdoc starts empty (set by the Vue computed), so
   nothing renders inside it. The wrapper is dark, the button is the
   only visible element. Clicking the button sets the srcdoc and the
   button removes itself — the preview then appears in its real
   browser-default form (white background, default form controls).
   ============================================================================= */
.pen-rendering-wrap {
	position: relative;
	width: 100%;
	background-color: #1b1b1b;
}
.pen-rendering-wrap > .pen-rendering {
	display: block;
	width: 100%;
}
.pen-reveal-button {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	width: 100%;
	height: 100%;
	background-color: #1b1b1b;
	color: #f9f9fb;
	border: none;
	cursor: pointer;
	font: inherit;
	padding: 1.5rem;
	text-align: center;
	line-height: 1.4;
	transition: background-color 0.15s ease;
}
.pen-reveal-button > * { display: block; }
.pen-reveal-button:hover,
.pen-reveal-button:focus-visible {
	background-color: #2a2a2a;
	outline: none;
}
.pen-reveal-button:focus-visible {
	box-shadow: inset 0 0 0 3px var(--color-orange-dark, #b03c10);
}
.pen-reveal-button svg {
	width: 2rem;
	height: 2rem;
	color: var(--code-keyword, #ff9b5e);
}
.pen-reveal-button span {
	font-size: 1.05rem;
	font-weight: 600;
}
.pen-reveal-button small {
	font-size: 0.8rem;
	color: #b0b0b0;
	font-weight: normal;
}
/* Honour prefers-reduced-motion (no fade transition) */
@media (prefers-reduced-motion: reduce) {
	.pen-reveal-button { transition: none; }
}

/* Theme toggle inline next to the TOC heading — styled as a small inline
   icon, matching the search-icon SVG sitting beside it. No fixed
   positioning, no circular button frame: it's a typography element, not
   a button bar. */
.toc-theme-toggle {
	display: inline-flex;
	vertical-align: middle;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--color-orange, lightsalmon);
	cursor: pointer;
}
.toc-theme-toggle:hover,
.toc-theme-toggle:focus-visible {
	color: var(--color-orange, lightsalmon);
}

/* Force BOTH the search SVG (which has width="34" height="34" attributes)
   and the theme-toggle SVG to render at identical 28px. The HTML width/
   height attributes are overridden here so the pair looks intentional. */
#top-of-toc .footer-search-link svg,
#top-of-toc .toc-theme-toggle .theme-toggle-icon {
	width: 28px;
	height: 28px;
	stroke-width: 2.5;
}
/* === COMMAND-PALETTE-CSS:END === */