:root {
   --bg: #1a1a1a;
   --fg: #c8c8c8;
   --fg-dim: #808080;
   --accent: #88c0d0;
   --code-bg: #252525;
   --border: #404040;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   font-size: 16px;
   line-height: 1.6;
}

body {
   font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
   background: var(--bg);
   color: var(--fg);
   /* max-width: 80ch; */
   margin: 0 auto;
   padding: 2rem;
}

a { color: #ff80ff; text-decoration: none; }
a:hover { text-decoration: underline; }

/* breadcrumb navigation - fixed at top */
.breadcrumbs {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   background: var(--bg);
   color: var(--fg-dim);
   padding: 0.5em 2rem;
   font-size: 0.9em;
   border-bottom: 1px solid var(--border);
   z-index: 999;
}
.breadcrumbs a { color: var(--fg-dim); }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs span { color: var(--fg-dim); }

/* spacing for fixed breadcrumbs */
article {
   padding-top: 2.5rem;
}

h1, h2, h3, h4, h5, h6 {
   margin: 1em 0 0.5em;
   font-weight: normal;
}

h1 { font-size: 1.0rem; color: #00ff00; }
h2 { font-size: 1.0rem; color: #00ffff; }
h3 { font-size: 1.0rem; color: #ffff00; }

p { margin: 1rem 0; }
ul, ol { margin: 1em 0; padding-left: 2em; }

pre {
   background: var(--code-bg);
   padding: 1em;
   overflow-x: auto;
   margin: 1em 0;
   border-left: 3px solid var(--border);
   line-height: 100%;
}

/* copy button in source-file header */
.copy-btn {
   background: transparent;
   color: var(--fg-dim);
   border: none;
   padding: 0.1em 0.4em;
   font-family: inherit;
   font-size: 0.9em;
   cursor: pointer;
   border-radius: 2px;
}

.copy-btn:hover {
   color: var(--accent);
}

.copy-btn.copied {
   color: var(--accent);
}

code {
   font-family: inherit;
   font-size: 0.9em;
}

:not(pre) > code {
   background: var(--code-bg);
   padding: 0.2em 0.4em;
}

table {
   border-collapse: collapse;
   margin: 1em 0;
   width: 100%;
   border-color: #40c040;
   border-width: 1px;
}

td {
   border-color: #008000;
   border-width: 1px;
   border-style: solid;
   white-space: nowrap;
   padding-left:2pt;
   padding-right:2pt;
}

th {
   border-color: #008000;
   border-width: 1px;
   border-style: solid;
   white-space: nowrap;
}

/* table of contents - floating draggable */
.toc {
   position: fixed;
   top: 1rem;
   right: 1rem;
   max-width: 300px;
   max-height: 80vh;
   overflow-y: auto;
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 4px;
   box-shadow: 0 4px 12px rgba(0,0,0,0.4);
   z-index: 1000;
   cursor: move;
   user-select: none;
}

.toc summary {
   padding: 0.5em 1em;
   cursor: move;
   color: var(--fg-dim);
   background: var(--code-bg);
   border-bottom: 1px solid var(--border);
}

.toc[open] summary {
   border-bottom: 1px solid var(--border);
}

.toc ul {
   list-style: none;
   padding: 0.5em 1em;
   margin: 0;
   cursor: default;
   user-select: text;
}

.toc li { padding: 0.2em 0; }
.toc-1 { font-weight: bold; }
.toc-2 { padding-left: 1em; }
.toc-3 { padding-left: 2em; }
.toc-4 { padding-left: 3em; }

/* runnable code */
.runnable {
   margin: 1em 0;
   background: var(--code-bg);
   padding: 1em;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.runnable .source-file-header {
   align-self: stretch;
   margin: -1em -1em 1em -1em;
   border-radius: 0;
}

.runnable canvas {
   max-width: 100%;
   background: #000;
}

/* download links */
a.download::before {
   content: '↓ ';
}

/* source file embeds */
.source-file {
   margin: 1em 0;
}
.source-file-header {
   background: var(--border);
   color: var(--fg-dim);
   padding: 0.3em 0.8em;
   font-size: 0.85em;
   border-radius: 4px 4px 0 0;
   font-family: monospace;
   display: flex;
   justify-content: space-between;
   align-items: center;
   text-shadow: -1px -1px 0 rgba(255,255,255,0.1), 1px 1px 0 rgba(0,0,0,0.3);
}
.source-file pre {
   margin-top: 0;
   border-radius: 0 0 4px 4px;
   border-left: none;
}

/* syntax highlighting - minimal dark theme */
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #6a737d; }
.token.punctuation { color: #e1e4e8; }
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol { color: #79b8ff; }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin { color: #9ecbff; }
.token.operator, .token.entity, .token.url { color: #e1e4e8; }
.token.atrule, .token.attr-value, .token.keyword { color: #f97583; }
.token.function, .token.class-name { color: #b392f0; }
.token.regex, .token.important, .token.variable { color: #ffab70; }

img {
   max-width: 100%;
   height: auto;
}

article { padding-bottom: 4rem; }