html, body, #app-page { background: var(--paper); color: var(--ink); font-family: Inter, sans-serif; }
#header { display: none; }
#overview-control { background: var(--panel); color: var(--ink); border-bottom: 1px solid var(--line); }
.box, .modal-card-head, .modal-card-body, .modal-card-foot, .dropdown-content { background: var(--panel); color: var(--ink); border: 1px solid var(--line); }
.title, .subtitle, .label, .content, .content h1, .content h2, .content h3 { color: var(--ink); }
svg text { font-family: Inter, sans-serif !important; }
.article { max-width: 760px; margin-inline: auto; }
body[data-unused] { display: initial; }
:root { --light-gray: var(--paper); }
#explainer svg text { fill: var(--ink) !important; }
#explainer svg .node-label, #explainer svg .layer-label { fill: var(--muted) !important; }
#explainer h1, #explainer h2, #explainer h3, #explainer p, #explainer li { color: var(--ink); }
#explainer h2 { font-size: 26px; font-weight: 500; }

#description, #description h2, #description h3, #description h4, #description h6, #description p, #description strong { color:var(--ink) !important; }
#description { max-width:780px; margin:0 auto; }
#description h2 { font-size:28px; font-weight:500; }
#overview text { fill:var(--ink) !important; }
button, .button, select { color:var(--ink) !important; background:var(--panel) !important; border-color:var(--line) !important; }

.kernel-controls { max-width:900px; margin:12px auto; padding:16px; border:1px solid var(--line); border-radius:10px; }
.kernel-controls summary { cursor:pointer; font-weight:500; }
.kernel-controls svg text { fill:var(--ink); }