/* This file is the source of truth for book CSS. It is published like system modules
and when running locally, it overwrites what ever is imported from the blog */
:root {
--font-zoom: 1;
--page-bg: #f8fafc;
--surface: #ffffff;
--surface-soft: #f1f5f9;
--surface-muted: #e2e8f0;
--text: #172033;
--text-muted: #64748b;
--heading: #0f172a;
--accent: #2563eb;
--accent-strong: #1d4ed8;
--accent-soft: #dbeafe;
--danger: #dc2626;
--warning: #fef3c7;
--border: #dbe3ee;
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
--shadow-md: 0 12px 30px rgba(15, 23, 42, 0.12);
--shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.18);
--radius-sm: 0.3rem;
--radius-md: 0.8rem;
--radius-lg: 1.35rem;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
min-height: 100vh;
font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
font-weight: 400;
font-style: normal;
font-size: calc(1rem  * var(--font-zoom));
line-height: 1.72;
color: var(--text);
background: var(--page-bg);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
.module{
display:none
}
h1:has(span.header-section-number){
display:none;
}
.material-symbols-outlined{
font-size: calc(1rem  * var(--font-zoom));
cursor:pointer;
user-select:none;
}
summary::marker {
color: var(--text-muted);
}
#msg-galley{
position:fixed;
top:0;
right:0;
height:100vh;
min-width:calc(20rem  * var(--font-zoom));
max-width:50%;
z-index:12;
background-color: transparent;
pointer-events: none;
padding: 1rem 1rem 0 0;
font-family: "Roboto", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings: "wdth" 100;
}
.msg-close{
position:absolute;
top:calc(3px  * var(--font-zoom));
right:calc(3px  * var(--font-zoom));
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
padding: 0;
background-color:var(--danger);
color: white;
font-weight:700;
font-size:calc(.7rem  * var(--font-zoom));
border-radius: 999px;
cursor:pointer;
}
.msg-dialog{
position: relative;
background-color:var(--surface);
margin-bottom:.75rem;
pointer-events: auto;
border-radius:var(--radius-sm);
border: 1px solid var(--border);
box-shadow: var(--shadow-md);
overflow: hidden;
}
.msg-button-{
margin: 0 .5rem .5rem 0;
}
.msg-button-bar{
background-color:var(--surface-soft);
text-align:center;
padding:.75rem;
border-top: 1px solid var(--border);
}
.msg-title{
background:var(--accent);
color:white;
font-weight:700;
padding:.55rem 2rem .55rem .85rem;
}
.msg-message{
background-color:var(--surface);
padding: .85rem;
}
#page-data{
display:none
}
.toast{
position:fixed;
bottom:2rem;
left:50%;
transform:translateX(-50%);
z-index:9999;
background-color:purple;
color:#fff;
padding:.7rem 1.25rem;
border-radius:var(--radius-md);
box-shadow:var(--shadow-lg);
}
.toast.success{
background-color:#15803d;
}
.toast.error{
background-color:var(--danger);
}
#menu{
top:0;
left:-100px;
position:fixed;
display:none;
background:var(--surface);
padding:0;
z-index:11;
transition: left .25s ease, box-shadow .25s ease;
height:100vh;
min-width:min(22rem, 88vw);
max-width:75vw;
overflow: auto;
border-right: 1px solid var(--border);
box-shadow: var(--shadow-lg);
}
#book-data{display:none}
#menu-content{
padding:1rem 1.25rem 2rem;
}
.menu-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:2.4rem;
height:2.4rem;
padding:0 .6rem;
cursor:pointer;
color:var(--text-muted);
border-radius:999px;
transition: background .18s ease, color .18s ease, transform .18s ease;
vertical-align:middle;
}
.menu-button:hover{
background:var(--accent-soft);
color:var(--accent-strong);
transform: translateY(-1px);
}
.login-button.logged-in{
background:#2e7d32;
color:#fff;
}
.menu-header{
top:0;
position:sticky;
background:var(--surface);
opacity:1;
margin:0;
padding:.45rem .6rem;
border-bottom:1px solid var(--border);
box-shadow: var(--shadow-sm);
z-index:1;
}
#book-title{
font-weight:700;
letter-spacing:.02em;
}
#menu-courses{
margin:0 0 1.25rem;
padding-bottom:1rem;
border-bottom:1px solid var(--border);
}
#menu-courses .menu-courses-picker{
margin:0;
}
#menu-courses .menu-courses-current{
display:flex;
align-items:center;
gap:.45rem;
list-style:none;
cursor:default;
font-size:.95rem;
font-weight:700;
line-height:1.3;
color:var(--heading);
padding:0;
}
#menu-courses details.menu-courses-picker > .menu-courses-current{
cursor:pointer;
}
#menu-courses .menu-courses-current::-webkit-details-marker{
display:none;
}
#menu-courses .menu-courses-current-name{
flex:1 1 auto;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
#menu-courses .menu-courses-current .menu-course-books{
flex:0 1 auto;
justify-content:flex-end;
}
#menu-courses .menu-courses-chevron{
flex-shrink:0;
font-size:1.25rem !important;
color:var(--text-muted);
transition:transform .18s ease;
}
#menu-courses details.menu-courses-picker[open] > .menu-courses-current .menu-courses-chevron{
transform:rotate(180deg);
}
#menu-courses .menu-courses-hint{
margin:.35rem 0 0;
font-size:.88rem;
color:var(--text-muted);
}
#menu-courses .menu-courses-list{
list-style:none;
margin:.4rem 0 0;
padding:0;
display:flex;
flex-direction:column;
gap:.25rem;
}
#menu-courses .menu-course{
display:flex;
flex-direction:row;
align-items:center;
justify-content:space-between;
gap:.4rem .55rem;
margin:0;
padding:.3rem .45rem;
border:1px solid var(--border);
border-radius:var(--radius-sm);
background:var(--surface);
cursor:pointer;
}
#menu-courses .menu-course:hover{
background:var(--accent-soft);
border-color:#bfdbfe;
}
#menu-courses .menu-course.menu-course-selecting{
opacity:.7;
pointer-events:none;
}
#menu-courses .menu-course-current{
background:var(--accent-soft);
border-color:#bfdbfe;
}
#menu-courses .menu-course-meta{
min-width:0;
display:flex;
flex-wrap:wrap;
align-items:baseline;
gap:.2rem .4rem;
}
#menu-courses .menu-course-title{
font-size:.88rem;
font-weight:600;
color:var(--heading);
line-height:1.25;
}
#menu-courses .menu-course-role{
font-size:.72rem;
color:var(--text-muted);
}
#menu-courses .menu-course-books{
display:flex;
flex-wrap:wrap;
align-items:flex-end;
justify-content:flex-end;
gap:.3rem;
}
#menu-courses .menu-course-select{
flex-shrink:0;
display:inline-flex;
align-items:center;
justify-content:center;
min-width:1.65rem;
height:2.15rem;
padding:.15rem .28rem .2rem .38rem;
border:1px solid #93c5fd;
border-left:3px solid var(--accent-strong);
border-radius:2px 4px 4px 2px;
background:
linear-gradient(90deg, rgba(15,23,42,.08) 0 3px, transparent 3px),
linear-gradient(180deg, #eff6ff 0%, #dbeafe 55%, #bfdbfe 100%);
color:var(--accent-strong);
font:inherit;
font-size:.68rem;
font-weight:700;
letter-spacing:.02em;
line-height:1;
text-transform:lowercase;
box-shadow:
1px 1px 0 rgba(15,23,42,.06),
2px 2px 4px rgba(15,23,42,.1),
inset 0 1px 0 rgba(255,255,255,.65);
cursor:pointer;
transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
#menu-courses .menu-courses-list .menu-course-select{
min-width:1.45rem;
height:1.9rem;
font-size:.62rem;
padding:.1rem .22rem .15rem .32rem;
}
#menu-courses .menu-course-select:hover:not(:disabled){
transform:translateY(-1px);
background:
linear-gradient(90deg, rgba(15,23,42,.1) 0 3px, transparent 3px),
linear-gradient(180deg, #dbeafe 0%, #bfdbfe 55%, #93c5fd 100%);
border-color:#60a5fa;
box-shadow:
1px 2px 0 rgba(15,23,42,.08),
2px 4px 8px rgba(15,23,42,.14),
inset 0 1px 0 rgba(255,255,255,.7);
}
#menu-courses .menu-course-select:disabled{
cursor:default;
}
#menu-courses .menu-course-select-spinner{
font-size:1rem !important;
line-height:1;
animation:menu-course-spin .7s linear infinite;
}
#menu-courses .menu-courses-list .menu-course-select-spinner{
font-size:.9rem !important;
}
@keyframes menu-course-spin{
to{transform:rotate(360deg)}
}
#menu-courses .menu-course-select-current,
#menu-courses .menu-course-select-current:disabled{
opacity:1;
transform:none;
background:
linear-gradient(90deg, rgba(15,23,42,.18) 0 3px, transparent 3px),
linear-gradient(180deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%);
border-color:var(--accent-strong);
border-left-color:#1e3a8a;
color:#fff;
font-weight:700;
box-shadow:
1px 1px 0 rgba(15,23,42,.12),
2px 2px 5px rgba(37,99,235,.35),
inset 0 1px 0 rgba(255,255,255,.25);
}
#menu-courses .menu-course-select-plain,
#menu-courses .menu-courses-list .menu-course-select-plain{
min-width:0;
height:auto;
padding:.2rem .55rem;
border:1px solid var(--border);
border-left-width:1px;
border-radius:999px;
background:var(--surface);
color:var(--accent);
font-size:.72rem;
font-weight:600;
letter-spacing:normal;
text-transform:none;
box-shadow:none;
}
#menu-courses .menu-course-select-plain:hover:not(:disabled){
transform:none;
background:var(--accent-soft);
border-color:#bfdbfe;
box-shadow:none;
}
#search-div{
width:100%;
white-space: nowrap;
margin-top: 1.5rem;
}
#search-div h6{
margin:0 0 .45rem 0;
font-size:.78rem;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--text-muted);
}
#search{
width: calc(100% - 2.25rem);
border:1px solid var(--border);
border-radius:999px;
padding:.55rem .85rem;
font: inherit;
font-size:.92rem;
color:var(--text);
background:var(--surface);
box-shadow: var(--shadow-sm);
outline:none;
transition: border-color .18s ease, box-shadow .18s ease;
}
#search:focus{
border-color:var(--accent);
box-shadow:0 0 0 4px rgba(37, 99, 235, .13);
}
#search-button{
padding-left:.45rem;
color:var(--accent);
vertical-align:middle;
}
#search-results{
font-size:.86rem;
margin-top: .85rem;
}
.search-result{
margin-top:.65rem;
padding:.75rem;
cursor:pointer;
border:1px solid var(--border);
border-radius:var(--radius-sm);
background:var(--surface);
box-shadow: var(--shadow-sm);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.search-result:hover{
background-color:#f8fbff;
border-color:#bfdbfe;
box-shadow:0 10px 24px rgba(37, 99, 235, .1);
transform: translateY(-1px);
}
.search-result-title{
font-weight:bold;
color:var(--heading);
}
.search-result-line{
margin:.25rem 0 .35rem .75rem;
color:var(--text-muted);
}
.search-term{
background-color:var(--warning);
border-radius:.2rem;
padding:0 .15rem;
}
.chapter-result-link{
color:var(--heading);
}
.toc-section-container{
margin-left:.75rem;
}
.toc-text-container{
margin-left:1.25rem;
color:var(--text-muted);
}
.chapter-section{
margin-top: calc(3rem  * var(--font-zoom));
margin-bottom: calc(3rem  * var(--font-zoom));
}
.hide{
display:none
}
img{
max-width:100%;
height:auto;
border-radius:var(--radius-md);
}
.entry-header{
position:fixed;
top:0;
left: 0;
width: 100%;
transition:opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
padding: .35rem .75rem;
-webkit-user-select: none; /* Safari */
user-select: none; /* Standard syntax */
background: var(--surface);
border-bottom:1px solid var(--border);
box-shadow:var(--shadow-sm);
z-index:10;
}
button.nav{
border-radius:999px;
border:1px solid var(--border);
background:var(--surface);
color:var(--accent);
box-shadow: var(--shadow-md);
width:2.8rem;
height:2.8rem;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}
.nav{
position: fixed;
bottom: 1rem;
opacity:1.0;
transition:opacity 0.35s ease, transform 0.18s ease, box-shadow 0.18s ease;
pointer-events: all;
}
.nav:hover{
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.dim-button:hover{opacity: 1.0;}
.dim-button{opacity: .35;}
.dim-header:hover{opacity: 1.0;}
.dim-header{opacity: 0;}
#prior-button {
left: 1rem;
}
#next-button {
right: 1rem;
}
.span-link{
cursor:pointer;
color:var(--accent);
font-weight:500;
}
.span-link:hover{
text-decoration: underline;
color:var(--accent-strong);
}
a:link {color: var(--accent); text-decoration:none}
a:visited {color: #4f46e5;}
a:hover {background-color: var(--accent-soft); color: var(--accent-strong); border-radius:.25rem;}
a:active {color: var(--accent-strong);}
.book-title{
margin-top: 6rem;
font-family:"Taviraj", Georgia, serif;
font-size:clamp(2.4rem, 7vw, calc(4rem  * var(--font-zoom)));
line-height:1.05;
text-align: center;
font-weight: 700;
color:var(--heading);
}
.book-author{
margin-top: 1rem;
font-size:calc(1.45rem  * var(--font-zoom));
text-align: center;
color:var(--text-muted);
}
.book-toc{
text-align: center;
margin-top:2rem;
}
.book-chapters{
display: inline-block;
}
.book-chapter{
text-align:left;
padding-left: 1rem;
text-indent: -1rem;
margin-bottom: 0.55rem;
}
.tool {
cursor:pointer;
font-size:calc(18px  * var(--font-zoom));
font-weight:400;
vertical-align: middle;
padding-left:.6rem;
color:var(--text-muted);
transition: color .18s ease, transform .18s ease;
}
.tool:hover {
color:var(--accent);
transform: translateY(-1px);
}
.lead-in{
margin-top:4rem;
}
.example, .indent, .category{
margin:1rem 0 0 1.1rem;
}
.category div:first-child{
color:var(--danger);
font-weight:700;
}
.example div:first-child{
color:var(--danger);
font-style: italic;
}
h1{
font-family:"Taviraj", Georgia, serif;
font-size:clamp(1.35rem, 4vw, calc(2.1rem * var(--font-zoom)));
line-height:1.18;
color:var(--heading);
font-weight:700;
margin:0;
}
h2, h3{
font-family:"Taviraj", Georgia, serif;
color:var(--heading);
line-height:1.24;
letter-spacing:-.015em;
}
h2{
font-size:clamp(1.55rem, 4vw, calc(2.15rem * var(--font-zoom)));
margin:3rem 0 1rem;
padding-top:.5rem;
}
h3{
font-size:clamp(1.2rem, 3vw, calc(1.45rem * var(--font-zoom)));
margin:2.25rem 0 .8rem;
}
.header-section-number{
color:var(--accent);
font-weight:700;
}
p{
margin-top:0;
margin-bottom:1.15rem;
}
p.vignette{
color:var(--danger)
}
.no-dot{
list-style-type: none;
}
ul.no-dot li{
padding-left: 1rem;
text-indent: -1rem;
margin-bottom: 0.3rem;
}
audio{
height:30px;
width:100%;
max-width:34rem;
}
div.post-body{
max-width:940px;
margin:0 auto;
padding:clamp(5.2rem, 7vw, 6.25rem) clamp(1.15rem, 4vw, 3.5rem) 4rem;
background:transparent;
}
div.index-boxnbt{
background:var(--surface);
padding-bottom:2rem;
}
.assessment-toolbar{
display:flex;
align-items:center;
justify-content:flex-end;
gap:6px;
margin-top:2rem;
padding:8px 10px;
background: linear-gradient(180deg, #1f2937, #111827);
border-radius: var(--radius-md);
border: 1px solid rgba(148, 163, 184, 0.22);
box-shadow: var(--shadow-lg);
}
.assessment-toolbar button{
display:inline-flex;
align-items:center;
gap:6px;
font:inherit;
font-size:13px;
font-weight:700;
padding:6px 14px;
border:0;
border-radius:6px;
background:transparent;
color:#8b949e;
cursor:pointer;
transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.assessment-toolbar button:hover{
background: rgba(255, 255, 255, 0.1);
color: #e6edf3;
}
.assessment-toolbar button:active{
background: rgba(255, 255, 255, 0.06);
transform: scale(0.96);
}
.assessment-toolbar button .material-symbols-outlined{
font-size:18px;
cursor:inherit;
}
.assessment-toolbar .assessment-submit:hover{
background: rgba(63, 185, 80, 0.18);
color: #3fb950;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
font-size: 18px;
line-height: 1;
}
blockquote{
margin:1.75rem 0;
padding:1rem 1.25rem 1rem 1.35rem;
background:var(--surface-soft);
border-left:.35rem solid var(--accent);
border-radius:0 var(--radius-md) var(--radius-md) 0;
color:#334155;
}
.note blockquote{
background:#E8F5E9;
border-left:.35rem solid darkgreen;
}
.note blockquote p:first-child::before {
content: "Note: ";
font-weight: bold;
color:#147523;
}
.tip blockquote{
background:#F3E5F5;
border-left:.35rem solid purple;
}
.tip blockquote p:first-child::before {
  content: "Tip: ";
  font-weight: bold;
  color:rgb(182, 0, 182);
}
.term blockquote{
background:#E3EDF7;
border-left:.35rem solid darkblue;
}
.term blockquote p:first-child::before {
content: "Term: ";
font-weight: bold;
color:#2161c1;
}
.caution blockquote{
background:#FFE2E2;
border-left:.35rem solid red;
}
.caution blockquote p:first-child::before {
content: "Caution: ";
font-weight: bold;
color:rgb(255, 89, 89);
}
.review blockquote{
background:#FFF8E1;
border-left:.35rem solid gold;
}
.review blockquote p:first-child::before {
  content: "Review: ";
  font-weight: bold;
  color:rgb(166, 144, 19);;
}

div.learning {
  background-color: darkblue;
  padding-top: .4rem;
  font-family: "Taviraj", Georgia, serif;
  font-size: 1.5rem;
  border-radius: 4px;
}

div.learning p:first-child{
  color:lightblue;
  font-weight: bold;
  text-align: center;
  margin-bottom: .5rem;
}

.learning blockquote{
  font-size: 1rem;
  margin-top:0;
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;;
}

.objectives blockquote{

  background:#E3EDF7;
  border-left:.35rem solid darkblue;
  border-right:.35rem solid darkblue;
  border-bottom:.35rem solid darkblue;
  border-radius:4px;
}
.objectives blockquote p:first-child::before {
  content: "After completing this lesson, the successful student will be able to";
  font-weight: bold;
  color:darkblue;
}
.objectives blockquote p:first-child {
  font-weight: bold;
  color:darkblue;
  
  text-align: left;
}

.ai-conversation blockquote{
  background:lightgrey;
  border:1px solid #bbb;
  border-radius: 5px;
}

div.ai-prompt{
  background:white;
  border:1px solid grey;
  border-radius: 10px;
  padding:10px 20px 10px 20px;
  box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.3);
  margin: 0 1rem 1rem 1rem;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

span.ai-prompt-x{
  font-size: 1.8em;
}





blockquote p:last-child{
margin-bottom:0;
}
hr{
height:1px;
border:0;
background:var(--border);
margin:2.75rem 0;
}
ul, ol{
padding-left:1.45rem;
margin:0 0 1.25rem;
}
li{
margin:.45rem 0;
}
code{
font-family:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size:.92em;
color:#0f766e;
background:#ecfdf5;
border:1px solid #bbf7d0;
border-radius:.35rem;
padding:.08rem .32rem;
}
pre code,
.sourceCode code{
color:inherit;
background:transparent;
border:0;
border-radius:0;
padding:0;
font-size:inherit;
}
pre,
pre.javascript-code,
pre.javascript-example,
pre.spreadsheet,
div.sourceCode pre{
margin:1rem 0;
padding:.75rem .85rem;
overflow:auto;
background:#0f172a;
color:#dbeafe;
border:1px solid rgba(148, 163, 184, .28);
border-radius:var(--radius-md);
box-shadow:var(--shadow-md);
font-family:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size:.88rem;
line-height:1.38;
tab-size:2;
white-space:pre;
}
div.sourceCode{
margin:1rem 0;
}
div.sourceCode pre{
margin:0;
}
.sourceCode .kw,
.sourceCode .cf{
color:#93c5fd;
}
.sourceCode .fu,
.sourceCode .at{
color:#67e8f9;
}
.sourceCode .st{
color:#86efac;
}
.sourceCode .dv{
color:#fbbf24;
}
.sourceCode .co{
color:#94a3b8;
font-style:italic;
}

div.table table{
display:block;
width:max-content;
max-width:100%;
border-collapse:separate;
border-spacing:0;
margin:1.5rem 0 2rem;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
border:1px solid var(--border);
border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);
background:var(--surface);
}
div.table th,
div.table td{
padding:.72rem .85rem;
border-bottom:1px solid var(--border);
text-align:left;
vertical-align:top;

}
div.table th{
font-size:.86rem;
font-weight:700;
color:var(--heading);
background:var(--surface-soft);
}
div.table tr.blog:last-child td{
border-bottom:0;
}
div.table tr:nth-child(even) td{
background:#f8fafc;
}
.monaco {
width: 100%;
margin: 1.5rem 0;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-lg);
border: 1px solid rgba(148, 163, 184, 0.22);
}
.monaco-bar {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 2px;
padding: 8px 10px;
background: linear-gradient(180deg, #1f2937, #111827);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.monaco-bar-label {
flex: 1;
font-family: "Roboto", sans-serif;
font-size: 11px;
font-weight: 700;
color: #94a3b8;
letter-spacing: 0.5px;
text-transform: uppercase;
padding-left: 4px;
}
.monaco-tool {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 6px;
color: #8b949e;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.monaco-tool:hover {
background: rgba(255, 255, 255, 0.1);
color: #e6edf3;
}
.monaco-tool:active {
background: rgba(255, 255, 255, 0.06);
transform: scale(0.92);
}
.monaco-tool[data-action="run"]:hover {
background: rgba(63, 185, 80, 0.18);
color: #3fb950;
}
.editor-holder {
background-color: #1e1e1e;
padding: 8px 0;
}
.editor {
margin: 0;
padding: 0;
}
.console {
background: #161b22;
border-top: 1px solid rgba(255, 255, 255, 0.07);
padding: 8px 0 6px;
position: relative;
min-height: 36px;
font-family: 'Consolas', 'Cascadia Code', 'Courier New', monospace;
font-size: 13px;
}
.console-line {
color: #c9d1d9;
padding: 2px 40px 2px 14px;
line-height: 1.6;
white-space: pre-wrap;
word-break: break-all;
}
.console-line:first-of-type {
margin-top: 2px;
}
.console-line.error {
color: #f85149;
background: rgba(248, 81, 73, 0.06);
}
span.exitButton {
position: absolute;
top: 6px;
right: 8px;
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 4px;
color: #6e7681;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
span.exitButton:hover {
background: rgba(255, 255, 255, 0.1);
color: #c9d1d9;
}
span.exitButton .material-symbols-outlined {
font-size: 15px;
}
pre.code {
color: #a8ff78;
background: #0d1117;
padding: 1rem 1.15rem;
margin: 1.35rem 0;
font-size: 14px;
border-radius: var(--radius-md);
border: 1px solid rgba(255, 255, 255, 0.07);
overflow-x: auto;
}
@media (max-width: 700px) {
body {
font-size: calc(.98rem * var(--font-zoom));
}
#msg-galley {
left: 0;
right: 0;
max-width: none;
min-width: 0;
padding: .75rem;
}
#menu {
max-width: 92vw;
}
.entry-header {
padding: .25rem .4rem;

}
div.post-body {
padding-left: 1rem;
padding-right: 1rem;
}
.nav {
bottom: .75rem;
}
#prior-button {
left: .75rem;
}
#next-button {
right: .75rem;
}
}