explico 0.1.0

package/src/styles/global.css

@@ -0,0 +1,763 @@
+@import 'katex/dist/katex.min.css';
+
+:root {
+  --sl-color-accent-low: #132f2a;
+  --sl-color-accent: #31b48d;
+  --sl-color-accent-high: #b8f2df;
+  --sl-content-width: 52rem;
+}
+
+:root[data-theme='light'] {
+  --sl-color-accent-low: #d9f4e9;
+  --sl-color-accent: #08775b;
+  --sl-color-accent-high: #123c32;
+}
+
+.lab-shell {
+  margin-block: 1.5rem;
+  padding: clamp(1rem, 3vw, 1.5rem);
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 0.75rem;
+  background: var(--sl-color-gray-7);
+}
+
+.lab-shell label,
+.lab-shell output {
+  font-variant-numeric: tabular-nums;
+}
+
+.lab-shell input,
+.lab-shell select {
+  font: inherit;
+}
+
+.lab-shell input[type='number'],
+.lab-shell select {
+  min-height: 2.5rem;
+  padding-inline: 0.5rem;
+  color: var(--sl-color-text);
+  border: 1px solid var(--sl-color-gray-4);
+  border-radius: 0.35rem;
+  background: var(--sl-color-bg);
+}
+
+.lab-shell input[type='range'] {
+  width: 100%;
+  min-height: 2.5rem;
+  accent-color: var(--sl-color-accent);
+}
+
+.lab-shell :focus-visible {
+  outline: 3px solid var(--sl-color-accent);
+  outline-offset: 2px;
+}
+
+.lab-control label {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 0.25rem 1rem;
+}
+
+.lab-field-value {
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--sl-color-text);
+}
+
+/* Clip only the inline axis: `overflow-x: auto` alone makes the block axis
+   compute to `auto` too, which adds a spurious vertical scrollbar around
+   display math. */
+.lab-math {
+  margin-block: 1.25rem;
+  padding-block: 0.15rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.lab-math .katex-display {
+  margin-block: 0;
+  text-align: start;
+}
+
+/* Long lesson equations must scroll inside the content column instead of
+   widening the entire page. This also contains KaTeX's visually hidden MathML
+   tree, whose intrinsic width can otherwise affect narrow viewports. */
+.sl-markdown-content .katex-display {
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.lab-chart-figure {
+  margin: 1.25rem 0;
+}
+
+.lab-chart-figure figcaption {
+  margin-top: 0.5rem;
+  font-size: 0.85rem;
+  color: var(--sl-color-gray-2);
+}
+
+.lab-controls {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  gap: 1rem;
+}
+
+.lab-control {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.lab-result {
+  margin-block: 1.25rem;
+  padding: 1rem;
+  border-left: 0.3rem solid var(--sl-color-accent);
+  background: var(--sl-color-bg);
+}
+
+.lab-metric-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+  gap: 0.85rem 1.25rem;
+  margin: 0;
+}
+
+.lab-metric-grid div {
+  min-width: 0;
+}
+
+.lab-metric-grid dt {
+  color: var(--sl-color-gray-2);
+  font-size: var(--sl-text-sm);
+}
+
+.lab-metric-grid dd {
+  margin: 0.2rem 0 0;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.lab-checkbox-control {
+  align-content: center;
+}
+
+.lab-checkbox-control label {
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.lab-checkbox-control input {
+  inline-size: 1.2rem;
+  block-size: 1.2rem;
+  flex: none;
+  accent-color: var(--sl-color-accent);
+}
+
+.lab-model-note {
+  margin-block: 1rem;
+  padding: 0.85rem 1rem;
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 0.5rem;
+  background: var(--sl-color-bg);
+}
+
+.lab-model-note h4 {
+  margin-block-start: 0;
+}
+
+.lab-chart {
+  overflow-x: auto;
+  min-height: 18rem;
+}
+
+.lab-chart svg {
+  max-width: 100%;
+  height: auto;
+  color: var(--sl-color-text);
+  background: var(--sl-color-bg);
+}
+
+.cds-leg-chart:empty {
+  display: none;
+}
+
+.lab-table-scroll {
+  max-width: 100%;
+  overflow-x: auto;
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 0.5rem;
+}
+
+.lab-table-scroll:focus-visible {
+  outline: 3px solid var(--sl-color-accent);
+  outline-offset: 2px;
+}
+
+.lab-data-table {
+  width: 100%;
+  font-variant-numeric: tabular-nums;
+}
+
+.lab-table-scroll .lab-data-table {
+  min-width: 64rem;
+  margin: 0;
+}
+
+.assessment-shell {
+  margin-block: 1.5rem;
+  padding: clamp(1rem, 3vw, 1.5rem);
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 0.75rem;
+  background: var(--sl-color-gray-7);
+}
+
+.assessment-shell :focus-visible {
+  outline: 3px solid var(--sl-color-accent);
+  outline-offset: 2px;
+}
+
+.assessment-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.5rem 1rem;
+  margin-bottom: 1rem;
+}
+
+.assessment-header h3 {
+  margin: 0;
+}
+
+.assessment-progress {
+  margin: 0;
+  font-size: 0.85rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--sl-color-gray-2);
+}
+
+.assessment-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.75rem;
+}
+
+.assessment-item {
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 0.5rem;
+  background: var(--sl-color-bg);
+}
+
+.assessment-item-heading {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+.assessment-disclosure {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  width: 100%;
+  padding: 0.75rem 1rem;
+  font: inherit;
+  text-align: start;
+  color: var(--sl-color-text);
+  background: none;
+  border: 0;
+  border-radius: 0.5rem;
+  cursor: pointer;
+}
+
+.assessment-item-title {
+  font-weight: 600;
+}
+
+.assessment-status {
+  margin-inline-start: auto;
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--sl-color-gray-2);
+}
+
+.assessment-status.is-correct {
+  color: var(--sl-color-accent);
+}
+
+.assessment-chevron {
+  flex: none;
+  transition: transform 0.15s ease;
+}
+
+.assessment-disclosure[aria-expanded='true'] .assessment-chevron {
+  transform: rotate(180deg);
+}
+
+.assessment-panel {
+  padding: 0 1rem 1rem;
+  border-top: 1px solid var(--sl-color-gray-5);
+}
+
+.assessment-prompt {
+  margin-block: 0.85rem 1rem;
+  font-weight: 600;
+}
+
+.assessment-choices {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.assessment-option {
+  display: flex;
+  gap: 0.5rem;
+  align-items: baseline;
+  padding: 0.35rem 0;
+}
+
+.assessment-numeric {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.assessment-numeric input[type='number'] {
+  font: inherit;
+  min-height: 2.5rem;
+  max-width: 12rem;
+  padding-inline: 0.5rem;
+  color: var(--sl-color-text);
+  border: 1px solid var(--sl-color-gray-4);
+  border-radius: 0.35rem;
+  background: var(--sl-color-bg);
+}
+
+.assessment-actions {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 0.85rem;
+}
+
+.assessment-actions button {
+  font: inherit;
+  min-height: 2.5rem;
+  padding-inline: 1rem;
+  color: var(--sl-color-text);
+  border: 1px solid var(--sl-color-gray-4);
+  border-radius: 0.35rem;
+  background: var(--sl-color-bg);
+  cursor: pointer;
+}
+
+.assessment-actions button:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+/* A placeholder line holds this slot open before checking so revealing the
+   result mostly fills it in place rather than pushing the collapsed questions
+   below it down. A long explanation can still add a line. */
+.assessment-feedback {
+  min-height: 3.25rem;
+  margin-top: 0.85rem;
+  padding: 0.75rem 1rem;
+  border-left: 0.3rem solid transparent;
+}
+
+.assessment-feedback.is-idle {
+  color: var(--sl-color-gray-3);
+  font-style: italic;
+}
+
+.assessment-feedback.is-correct {
+  border-left-color: var(--sl-color-accent);
+  background: var(--sl-color-gray-7);
+}
+
+.assessment-feedback.is-incorrect {
+  border-left-color: var(--sl-color-gray-3);
+  background: var(--sl-color-gray-7);
+}
+
+/* Reader-controlled desktop layout. Collapsed panels remain as narrow edge
+   rails and preview over the article on pointer hover. Keyboard users restore
+   them with the focused edge button. Mobile navigation and the mobile table
+   of contents ignore these preferences. */
+.layout-edge-toggle {
+  display: none;
+}
+
+.layout-edge-toggle[hidden] {
+  display: none !important;
+}
+
+@media (min-width: 50rem) {
+  :root {
+    --layout-edge-rail-width: 2.5rem;
+    --layout-edge-toggle-size: 2rem;
+  }
+
+  .layout-edge-toggle:not([hidden]) {
+    display: grid;
+    place-items: center;
+    width: var(--layout-edge-toggle-size);
+    height: var(--layout-edge-toggle-size);
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 999px;
+    padding: 0;
+    color: var(--sl-color-text-accent);
+    background: var(--sl-color-bg-nav);
+    box-shadow: var(--sl-shadow-sm);
+    font: inherit;
+    line-height: 1;
+    cursor: pointer;
+  }
+
+  .layout-edge-toggle .layout-edge-icon {
+    display: block;
+    flex: none;
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .layout-edge-toggle:hover {
+    border-color: var(--sl-color-accent);
+    background: var(--sl-color-accent-low);
+  }
+
+  .layout-edge-toggle:focus-visible {
+    outline: 3px solid var(--sl-color-accent-high);
+    outline-offset: 2px;
+  }
+
+  .layout-edge-toggle .layout-edge-icon-restore,
+  .layout-edge-toggle[aria-expanded='false'] .layout-edge-icon-hide {
+    display: none;
+  }
+
+  .layout-edge-toggle[aria-expanded='false'] .layout-edge-icon-restore {
+    display: block;
+  }
+
+  .layout-navigation-panel {
+    min-height: 100%;
+  }
+
+  .layout-navigation-toggle {
+    position: fixed;
+    z-index: calc(var(--sl-z-index-menu) + 1);
+    inset-block-start: calc(var(--sl-nav-height) + 0.75rem);
+    inset-inline-start: calc(
+      var(--sl-sidebar-width) - var(--layout-edge-toggle-size) - 0.35rem
+    );
+  }
+
+  html[data-navigation-hidden] {
+    --sl-content-inline-start: var(--layout-edge-rail-width);
+  }
+
+  html[data-navigation-hidden] .sidebar-pane {
+    width: var(--layout-edge-rail-width);
+    overflow: hidden;
+    transition: width 140ms ease;
+  }
+
+  html[data-navigation-hidden] .layout-navigation-toggle {
+    inset-inline-start: calc(
+      (var(--layout-edge-rail-width) - var(--layout-edge-toggle-size)) / 2
+    );
+  }
+
+  html[data-navigation-hidden] .layout-navigation-content {
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 100ms ease;
+  }
+
+  html[data-navigation-hidden]:not([data-navigation-peek-suppressed])
+    .sidebar-pane:hover {
+    width: var(--sl-sidebar-width);
+    overflow-y: auto;
+    background: var(--sl-color-bg-sidebar);
+    box-shadow: var(--sl-shadow-lg);
+  }
+
+  html[data-navigation-hidden]:not([data-navigation-peek-suppressed])
+    .sidebar-pane:hover
+    .layout-navigation-content {
+    visibility: visible;
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+@media (min-width: 72rem) {
+  :root {
+    /* Mirrors Starlight's responsive right-column allocation. The main frame
+       is the viewport minus the current navigation width, which can itself be
+       the collapsed edge rail. */
+    --layout-page-sidebar-open-width: max(
+      var(--sl-sidebar-width),
+      calc(
+        var(--sl-sidebar-width) +
+          (
+            100vw - var(--sl-content-inline-start, 0rem) -
+              var(--sl-content-width) - var(--sl-sidebar-width)
+          ) /
+          2
+      )
+    );
+  }
+
+  .right-sidebar {
+    background-color: var(--sl-color-bg);
+  }
+
+  .layout-page-sidebar {
+    position: relative;
+    min-height: 100%;
+    padding-block-start: 2.75rem;
+  }
+
+  .layout-contents-toggle {
+    position: absolute;
+    z-index: 1;
+    inset-block-start: 0.5rem;
+    inset-inline-start: 0.35rem;
+  }
+
+  html[data-page-sidebar-hidden] {
+    --__toc-width: var(--layout-edge-rail-width);
+  }
+
+  html[data-page-sidebar-hidden] .right-sidebar-container {
+    width: var(--layout-edge-rail-width);
+  }
+
+  html[data-page-sidebar-hidden] .layout-contents-toggle {
+    position: fixed;
+    inset-block-start: calc(var(--sl-nav-height) + 0.5rem);
+    inset-inline-start: auto;
+    inset-inline-end: calc(
+      (var(--layout-edge-rail-width) - var(--layout-edge-toggle-size)) / 2
+    );
+  }
+
+  html[data-page-sidebar-hidden] .right-sidebar {
+    z-index: var(--sl-z-index-toc);
+    inset-inline-start: auto;
+    inset-inline-end: 0;
+    width: var(--layout-edge-rail-width);
+    overflow: hidden;
+    transition: width 140ms ease;
+  }
+
+  html[data-page-sidebar-hidden] .main-pane {
+    --sl-content-margin-inline: auto;
+    width: calc(100% - var(--layout-edge-rail-width));
+  }
+
+  html[data-page-sidebar-hidden] .layout-page-sidebar-content {
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 100ms ease;
+  }
+
+  html[data-page-sidebar-hidden]:not([data-page-sidebar-peek-suppressed])
+    .right-sidebar:hover {
+    width: var(--layout-page-sidebar-open-width);
+    overflow-y: auto;
+    box-shadow: var(--sl-shadow-lg);
+  }
+
+  html[data-page-sidebar-hidden]:not([data-page-sidebar-peek-suppressed])
+    .right-sidebar:hover
+    .layout-page-sidebar-content {
+    visibility: visible;
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html[data-navigation-hidden] .sidebar-pane,
+  html[data-page-sidebar-hidden] .right-sidebar,
+  html[data-navigation-hidden] .layout-navigation-content,
+  html[data-page-sidebar-hidden] .layout-page-sidebar-content {
+    transition: none;
+  }
+}
+
+/* Source citations: inline `[n]` markers and the end-of-page reference list
+   emitted by the remark-citation adapter. The hover/pin panel is styled in
+   the CitationLayer island. */
+.sl-markdown-content a.citation-ref {
+  font-size: 0.7em;
+  font-weight: 600;
+  line-height: 0;
+  vertical-align: super;
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+  padding-inline: 0.1em;
+  border-radius: 0.2em;
+  color: var(--sl-color-text-accent);
+  white-space: nowrap;
+}
+
+.sl-markdown-content a.citation-ref:hover,
+.sl-markdown-content a.citation-ref:focus-visible {
+  background: var(--sl-color-accent-low);
+}
+
+.sl-markdown-content .citations-heading {
+  margin-block-start: 2.5rem;
+  font-size: var(--sl-text-lg);
+}
+
+.sl-markdown-content ol.citations-list {
+  display: grid;
+  gap: 0.6rem;
+  font-size: var(--sl-text-sm);
+  color: var(--sl-color-gray-2);
+}
+
+.sl-markdown-content ol.citations-list li {
+  scroll-margin-block-start: 5rem;
+}
+
+.sl-markdown-content ol.citations-list a {
+  text-decoration: underline;
+}
+
+.sl-markdown-content ol.citations-list li:target {
+  background: var(--sl-color-accent-low);
+  border-radius: 0.3rem;
+}
+
+.sl-markdown-content .citation-url {
+  overflow-wrap: anywhere;
+}
+
+.sl-markdown-content .citation-status {
+  padding-inline: 0.4em;
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 999px;
+  font-size: var(--sl-text-xs);
+  text-transform: lowercase;
+}
+
+.sl-markdown-content .citation-backref {
+  margin-inline-start: 0.15rem;
+}
+
+@media (forced-colors: active) {
+  .sl-markdown-content a.citation-ref:hover,
+  .sl-markdown-content a.citation-ref:focus-visible {
+    outline: 2px solid Highlight;
+  }
+}
+
+/* Equation identity (D7): a keyed `$$…$$` is wrapped by the remark adapter in
+   `.keyed-equation` with an `id="eq-<key>"`, a `data-eq-number`, and a
+   focusable number link. Prose refers to it with `[[eq:key]]` →
+   `a.equation-ref`. The deep-link highlight is a pure-CSS `:target` animation
+   with a reduced-motion fallback; `EquationEnhancer.astro` only re-triggers it
+   on a repeated activation and moves focus. */
+.sl-markdown-content .keyed-equation {
+  position: relative;
+  scroll-margin-block-start: 5rem;
+  padding-inline-end: 3.5rem;
+  border-radius: 0.3rem;
+}
+
+.sl-markdown-content .keyed-equation > .katex-display {
+  margin-block: 0;
+}
+
+.sl-markdown-content a.keyed-equation__number {
+  position: absolute;
+  inset-inline-end: 0.25rem;
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+  font-variant-numeric: tabular-nums;
+  font-size: var(--sl-text-sm);
+  color: var(--sl-color-text-accent);
+  text-decoration: none;
+}
+
+.sl-markdown-content a.keyed-equation__number:hover,
+.sl-markdown-content a.keyed-equation__number:focus-visible {
+  text-decoration: underline;
+}
+
+.sl-markdown-content a.equation-ref {
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+  padding-inline: 0.1em;
+  border-radius: 0.2em;
+  color: var(--sl-color-text-accent);
+  white-space: nowrap;
+}
+
+.sl-markdown-content a.equation-ref:hover,
+.sl-markdown-content a.equation-ref:focus-visible {
+  background: var(--sl-color-accent-low);
+}
+
+@keyframes eq-flash {
+  from {
+    background: var(--sl-color-accent-low);
+    box-shadow: 0 0 0 0.35rem var(--sl-color-accent-low);
+  }
+  to {
+    background: transparent;
+    box-shadow: 0 0 0 0.35rem transparent;
+  }
+}
+
+.sl-markdown-content .keyed-equation:target {
+  animation: eq-flash 3s ease-out both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sl-markdown-content .keyed-equation:target {
+    animation: none;
+    background: var(--sl-color-accent-low);
+    outline: 2px solid var(--sl-color-accent);
+    outline-offset: 0.2rem;
+  }
+}
+
+@media (forced-colors: active) {
+  .sl-markdown-content .keyed-equation:target {
+    animation: none;
+    outline: 2px solid Highlight;
+    outline-offset: 0.2rem;
+  }
+  .sl-markdown-content a.equation-ref:hover,
+  .sl-markdown-content a.equation-ref:focus-visible {
+    outline: 2px solid Highlight;
+  }
+}
+
+@media print {
+  .sl-markdown-content a.keyed-equation__number {
+    position: static;
+    display: block;
+    transform: none;
+    text-align: end;
+    color: inherit;
+  }
+  .sl-markdown-content .keyed-equation {
+    padding-inline-end: 0;
+  }
+}