UI Components Medium
Science — Equation Block
A KaTeX-style display equation block rendered entirely in HTML and CSS with no math libraries. It typesets four numbered equations from a fictional two-box climate model — stacked fractions with a real rule, summation and integral glyphs with limits, Greek letters, subscripts and superscripts, and right-aligned equation numbers. Inline math sits inside the prose, hovering a reference button highlights its display block, and a per-equation copy action reveals and copies the LaTeX source. A calibrated-parameters table rounds out the article.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--bg: #ffffff;
--bg-alt: #f6f8fb;
--ink: #0f1b2d;
--ink-2: #33445c;
--muted: #697892;
--accent: #1a4f8a;
--accent-d: #123a66;
--accent-50: #e9f0f9;
--teal: #0f7d78;
--teal-50: #e4f3f1;
--line: rgba(15, 27, 45, 0.12);
--line-2: rgba(15, 27, 45, 0.2);
--ok: #2f9e6f;
--warn: #c9821f;
--danger: #cf4538;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 16px;
--serif: "Source Serif 4", Georgia, serif;
--ui: "Inter", system-ui, sans-serif;
--mono: "JetBrains Mono", ui-monospace, monospace;
--shadow-sm: 0 1px 2px rgba(15, 27, 45, 0.06);
--shadow-md: 0 6px 22px rgba(15, 27, 45, 0.08);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--serif);
line-height: 1.6;
font-size: 17px;
}
.mono {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--accent);
color: #fff;
padding: 10px 16px;
z-index: 50;
font-family: var(--ui);
border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus {
left: 0;
}
/* ---------- Masthead ---------- */
.masthead {
background: linear-gradient(180deg, var(--accent-50), var(--bg));
border-bottom: 1px solid var(--line);
}
.masthead-inner {
max-width: 860px;
margin: 0 auto;
padding: 44px 24px 36px;
}
.journal {
font-family: var(--ui);
font-size: 12.5px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--accent-d);
font-weight: 600;
margin: 0 0 12px;
}
.masthead h1 {
font-family: var(--serif);
font-weight: 700;
font-size: clamp(1.6rem, 4.4vw, 2.5rem);
line-height: 1.18;
margin: 0 0 18px;
color: var(--ink);
letter-spacing: -0.01em;
}
.byline {
font-family: var(--ui);
font-size: 15px;
color: var(--ink-2);
margin: 0 0 14px;
}
.byline sup {
color: var(--accent);
font-weight: 600;
}
.aff {
display: block;
font-size: 13px;
color: var(--muted);
margin-top: 4px;
}
.meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 0;
}
.badge {
font-family: var(--ui);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--accent-d);
background: #fff;
border: 1px solid var(--line-2);
padding: 4px 10px;
border-radius: 999px;
}
.badge-teal {
color: var(--teal);
border-color: rgba(15, 125, 120, 0.4);
background: var(--teal-50);
}
.doi {
font-size: 12.5px;
color: var(--muted);
}
/* ---------- Paper ---------- */
.paper {
max-width: 860px;
margin: 0 auto;
padding: 40px 24px 80px;
}
.kicker {
font-family: var(--ui);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
font-weight: 700;
margin: 0 0 8px;
}
.abstract {
background: var(--bg-alt);
border: 1px solid var(--line);
border-left: 3px solid var(--accent);
border-radius: var(--r-md);
padding: 20px 22px;
}
.abstract p {
margin: 0;
font-size: 16px;
color: var(--ink-2);
}
.rule {
border: none;
border-top: 1px solid var(--line);
margin: 34px 0;
}
.prose h2 {
font-family: var(--serif);
font-weight: 600;
font-size: 1.35rem;
margin: 40px 0 12px;
color: var(--ink);
letter-spacing: -0.01em;
}
.prose p {
color: var(--ink-2);
margin: 0 0 16px;
}
/* ---------- Inline math ---------- */
.im {
font-family: var(--serif);
white-space: nowrap;
padding: 0 1px;
}
.im i {
font-style: italic;
}
.im sub {
font-family: var(--serif);
}
/* ---------- Inline eq reference button ---------- */
.eqref {
font-family: var(--ui);
font-size: 0.92em;
font-weight: 600;
color: var(--accent);
background: var(--accent-50);
border: 1px solid transparent;
border-radius: var(--r-sm);
padding: 0 6px;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.eqref:hover,
.eqref:focus-visible {
background: var(--accent);
color: #fff;
outline: none;
}
.eqref:focus-visible {
box-shadow: 0 0 0 3px rgba(26, 79, 138, 0.28);
}
/* ---------- Equation blocks ---------- */
.eq-block {
position: relative;
margin: 26px 0;
padding: 22px 18px 16px;
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: var(--r-lg);
transition: box-shadow 0.25s, border-color 0.25s, background 0.25s;
}
.eq-block.is-highlight {
border-color: var(--accent);
background: var(--accent-50);
box-shadow: 0 0 0 3px rgba(26, 79, 138, 0.16), var(--shadow-md);
}
.eq-block:focus {
outline: none;
}
.eq-body {
display: flex;
align-items: center;
justify-content: center;
position: relative;
min-height: 56px;
padding: 0 56px;
}
.eq-num {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
font-family: var(--mono);
font-size: 14px;
color: var(--muted);
}
/* ---------- Math row primitives ---------- */
.mrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--serif);
font-size: 1.5rem;
color: var(--ink);
}
.mrow i {
font-style: italic;
}
.mrow sub {
font-size: 0.62em;
font-style: italic;
}
.var {
display: inline-flex;
align-items: baseline;
}
.op {
font-family: var(--mono);
font-size: 1.15rem;
color: var(--ink-2);
margin: 0 2px;
}
.paren {
font-size: 1.6rem;
color: var(--ink-2);
}
/* fraction */
.frac {
display: inline-flex;
flex-direction: column;
align-items: center;
vertical-align: middle;
margin: 0 4px;
}
.frac .num,
.frac .den {
padding: 0 6px;
font-size: 0.86em;
line-height: 1.05;
}
.frac .bar {
display: block;
width: 100%;
height: 1.5px;
background: var(--ink);
margin: 2px 0;
}
/* big operators: summation / integral */
.bigop {
display: inline-grid;
grid-template-areas: "top" "sym" "bot";
justify-items: center;
align-items: center;
margin: 0 4px;
line-height: 1;
}
.bigop .sigma {
grid-area: sym;
font-size: 2.1rem;
font-weight: 400;
line-height: 0.8;
color: var(--accent-d);
}
.bigop .integral {
grid-area: sym;
font-size: 2.7rem;
font-style: italic;
line-height: 0.7;
color: var(--accent-d);
}
.bigop .lim-top {
grid-area: top;
font-size: 0.62rem;
color: var(--muted);
}
.bigop .lim-bot {
grid-area: bot;
font-size: 0.62rem;
color: var(--muted);
}
.intop {
padding: 0 2px;
}
.dt {
margin-left: 2px;
}
/* ---------- Copy LaTeX ---------- */
.copy-tex {
position: absolute;
top: 12px;
right: 12px;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--ui);
font-size: 12px;
font-weight: 600;
color: var(--accent-d);
background: #fff;
border: 1px solid var(--line-2);
border-radius: 999px;
padding: 5px 11px;
cursor: pointer;
opacity: 0;
transform: translateY(-2px);
transition: opacity 0.2s, transform 0.2s, background 0.15s, color 0.15s;
}
.eq-block:hover .copy-tex,
.eq-block:focus-within .copy-tex {
opacity: 1;
transform: translateY(0);
}
.copy-tex:hover,
.copy-tex:focus-visible {
background: var(--accent);
color: #fff;
outline: none;
}
.copy-tex:focus-visible {
opacity: 1;
box-shadow: 0 0 0 3px rgba(26, 79, 138, 0.28);
}
.copy-tex.is-done {
background: var(--ok);
color: #fff;
border-color: var(--ok);
}
.copy-ico {
font-size: 13px;
}
/* revealed LaTeX source */
.tex-source {
display: none;
margin: 14px 56px 0;
padding: 10px 12px;
background: var(--ink);
color: #d7e3f4;
font-family: var(--mono);
font-size: 12.5px;
border-radius: var(--r-sm);
overflow-x: auto;
white-space: pre;
}
.eq-block.show-tex .tex-source {
display: block;
}
figcaption {
font-family: var(--ui);
font-size: 13px;
color: var(--muted);
margin-top: 14px;
padding-top: 12px;
border-top: 1px dashed var(--line);
line-height: 1.5;
}
figcaption b {
color: var(--ink-2);
font-weight: 700;
}
/* ---------- Table ---------- */
.table-wrap {
overflow-x: auto;
border: 1px solid var(--line);
border-radius: var(--r-md);
margin-top: 8px;
}
.table-wrap:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
table {
width: 100%;
border-collapse: collapse;
font-family: var(--ui);
font-size: 14px;
min-width: 480px;
}
thead th {
text-align: left;
background: var(--bg-alt);
color: var(--ink-2);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.03em;
text-transform: uppercase;
padding: 12px 16px;
border-bottom: 1px solid var(--line-2);
}
tbody td {
padding: 11px 16px;
border-bottom: 1px solid var(--line);
color: var(--ink-2);
}
tbody tr:last-child td {
border-bottom: none;
}
tbody tr:hover {
background: var(--accent-50);
}
td.num {
color: var(--ink);
font-weight: 500;
}
/* ---------- Toast ---------- */
.toast {
position: fixed;
left: 50%;
bottom: 26px;
transform: translate(-50%, 14px);
background: var(--ink);
color: #fff;
font-family: var(--ui);
font-size: 14px;
font-weight: 500;
padding: 11px 18px;
border-radius: 999px;
box-shadow: var(--shadow-md);
opacity: 0;
pointer-events: none;
transition: opacity 0.22s, transform 0.22s;
z-index: 60;
}
.toast.show {
opacity: 1;
transform: translate(-50%, 0);
}
/* ---------- Responsive ---------- */
@media (max-width: 640px) {
body {
font-size: 16px;
}
.masthead-inner,
.paper {
padding-left: 16px;
padding-right: 16px;
}
.mrow {
font-size: 1.2rem;
}
.eq-body {
padding: 0 8px 40px;
min-height: 64px;
}
.eq-num {
top: auto;
bottom: 6px;
right: 12px;
transform: none;
}
.copy-tex {
opacity: 1;
transform: none;
top: 10px;
right: 10px;
}
.tex-source {
margin-left: 0;
margin-right: 0;
}
.bigop .integral {
font-size: 2.2rem;
}
}
@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
}
}(function () {
"use strict";
/* ---------- Toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer = null;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("show");
}, 2000);
}
/* ---------- Hover / focus highlight from inline refs ---------- */
var hlTimer = null;
function highlight(id, on) {
var fig = document.getElementById(id);
if (!fig) return;
if (on) {
fig.classList.add("is-highlight");
} else {
fig.classList.remove("is-highlight");
}
}
var refs = document.querySelectorAll(".eqref");
refs.forEach(function (ref) {
var id = ref.getAttribute("data-target");
ref.addEventListener("mouseenter", function () {
highlight(id, true);
});
ref.addEventListener("mouseleave", function () {
highlight(id, false);
});
ref.addEventListener("focus", function () {
highlight(id, true);
});
ref.addEventListener("blur", function () {
highlight(id, false);
});
// Click scrolls to the equation and pulses the highlight.
ref.addEventListener("click", function () {
var fig = document.getElementById(id);
if (!fig) return;
fig.scrollIntoView({ behavior: "smooth", block: "center" });
highlight(id, true);
clearTimeout(hlTimer);
hlTimer = setTimeout(function () {
highlight(id, false);
}, 1600);
});
});
/* ---------- Copy LaTeX + reveal source ---------- */
function copyText(text) {
if (navigator.clipboard && navigator.clipboard.writeText) {
return navigator.clipboard.writeText(text);
}
return new Promise(function (resolve, reject) {
try {
var ta = document.createElement("textarea");
ta.value = text;
ta.style.position = "fixed";
ta.style.opacity = "0";
document.body.appendChild(ta);
ta.focus();
ta.select();
document.execCommand("copy");
document.body.removeChild(ta);
resolve();
} catch (e) {
reject(e);
}
});
}
var buttons = document.querySelectorAll(".copy-tex");
buttons.forEach(function (btn) {
var fig = btn.closest(".eq-block");
var tex = btn.getAttribute("data-tex") || "";
// Inject a hidden <pre> showing the source, toggled on first copy.
var source = document.createElement("pre");
source.className = "tex-source";
source.textContent = tex;
fig.appendChild(source);
var doneTimer = null;
btn.addEventListener("click", function () {
copyText(tex).then(
function () {
fig.classList.add("show-tex");
btn.classList.add("is-done");
var label = btn.lastChild;
var prev = btn.textContent;
btn.innerHTML =
'<span class="copy-ico" aria-hidden="true">✓</span> Copied';
toast("LaTeX copied to clipboard");
clearTimeout(doneTimer);
doneTimer = setTimeout(function () {
btn.classList.remove("is-done");
btn.innerHTML =
'<span class="copy-ico" aria-hidden="true">⎘</span> Copy LaTeX';
}, 1600);
},
function () {
fig.classList.add("show-tex");
toast("Copy failed — source revealed below");
}
);
});
});
/* ---------- Hover an equation block highlights matching inline refs ---------- */
var blocks = document.querySelectorAll(".eq-block");
blocks.forEach(function (block) {
var id = block.id;
var matching = document.querySelectorAll('.eqref[data-target="' + id + '"]');
block.addEventListener("mouseenter", function () {
matching.forEach(function (m) {
m.style.background = "var(--accent)";
m.style.color = "#fff";
});
});
block.addEventListener("mouseleave", function () {
matching.forEach(function (m) {
m.style.background = "";
m.style.color = "";
});
});
});
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Equation Block — Coupled Climate–Ocean Transport</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#paper">Skip to article</a>
<header class="masthead">
<div class="masthead-inner">
<p class="journal">Journal of Geophysical Transport · Vol. 48, No. 3</p>
<h1>A Reduced Two-Box Model for Coupled Climate–Ocean Heat Transport</h1>
<p class="byline">
E. Marchetti<sup>1</sup>, R. Okonkwo<sup>2</sup>, and L. Vance<sup>1</sup>
<span class="aff"><sup>1</sup>Institute for Climate Dynamics, Aurelia University · <sup>2</sup>Marine Systems Lab, Cape Verde Polytechnic</span>
</p>
<p class="meta">
<span class="badge">Open Access</span>
<span class="badge badge-teal">Peer Reviewed</span>
<span class="doi mono">DOI: 10.4271/jgt.2026.0483</span>
</p>
</div>
</header>
<main id="paper" class="paper">
<section class="abstract" aria-label="Abstract">
<h2 class="kicker">Abstract</h2>
<p>
We present a reduced-order energy-balance model in which the surface and deep ocean are
represented as two well-mixed reservoirs exchanging heat through a diffusive interface. The
governing equations admit a closed-form equilibrium that we use to estimate the effective
climate sensitivity from the synthetic <em>Helios Drift</em> dataset.
</p>
</section>
<hr class="rule" />
<article class="prose">
<h2>1 Energy balance of the surface box</h2>
<p>
Let <span class="im" data-im="T_s"><i>T</i><sub>s</sub></span> denote the surface-box
temperature anomaly and <span class="im" data-im="C_s"><i>C</i><sub>s</sub></span> its heat
capacity. The radiative forcing <span class="im" data-im="F(t)"><i>F</i>(<i>t</i>)</span> is
balanced by a feedback term <span class="im" data-im="\lambda T_s">−λ <i>T</i><sub>s</sub></span>
and the heat exchanged with the deep box. Hovering an inline reference such as
<button class="eqref" data-target="eq-balance" type="button">Eq. (1)</button>
highlights its display block below. The full surface balance reads
</p>
<!-- Equation 1: surface energy balance -->
<figure class="eq-block" id="eq-balance" tabindex="-1">
<div class="eq-body">
<math-row class="mrow" aria-label="C sub s times d T sub s by d t equals F of t minus lambda T sub s minus gamma times open paren T sub s minus T sub d close paren">
<span class="var"><i>C</i><sub>s</sub></span>
<span class="frac">
<span class="num"><i>d</i><i>T</i><sub>s</sub></span>
<span class="bar"></span>
<span class="den"><i>d</i><i>t</i></span>
</span>
<span class="op">=</span>
<span class="var"><i>F</i>(<i>t</i>)</span>
<span class="op">−</span>
<span class="var">λ <i>T</i><sub>s</sub></span>
<span class="op">−</span>
<span class="var">γ</span>
<span class="paren">(</span>
<span class="var"><i>T</i><sub>s</sub> − <i>T</i><sub>d</sub></span>
<span class="paren">)</span>
</math-row>
<span class="eq-num">(1)</span>
</div>
<button class="copy-tex" type="button" data-tex="C_s \frac{dT_s}{dt} = F(t) - \lambda\,T_s - \gamma\,(T_s - T_d)">
<span class="copy-ico" aria-hidden="true">⎘</span> Copy LaTeX
</button>
<figcaption><b>Figure 1.</b> Surface-box energy balance. Heat capacity times the temperature tendency equals forcing minus feedback minus inter-box exchange.</figcaption>
</figure>
<h2>2 Deep-ocean reservoir</h2>
<p>
The deep box, with capacity <span class="im" data-im="C_d"><i>C</i><sub>d</sub></span>,
is driven solely by the exchange flux, giving the companion relation
<button class="eqref" data-target="eq-deep" type="button">Eq. (2)</button>.
At equilibrium both tendencies vanish.
</p>
<!-- Equation 2: deep box -->
<figure class="eq-block" id="eq-deep" tabindex="-1">
<div class="eq-body">
<math-row class="mrow" aria-label="C sub d times d T sub d by d t equals gamma times open paren T sub s minus T sub d close paren">
<span class="var"><i>C</i><sub>d</sub></span>
<span class="frac">
<span class="num"><i>d</i><i>T</i><sub>d</sub></span>
<span class="bar"></span>
<span class="den"><i>d</i><i>t</i></span>
</span>
<span class="op">=</span>
<span class="var">γ</span>
<span class="paren">(</span>
<span class="var"><i>T</i><sub>s</sub> − <i>T</i><sub>d</sub></span>
<span class="paren">)</span>
</math-row>
<span class="eq-num">(2)</span>
</div>
<button class="copy-tex" type="button" data-tex="C_d \frac{dT_d}{dt} = \gamma\,(T_s - T_d)">
<span class="copy-ico" aria-hidden="true">⎘</span> Copy LaTeX
</button>
<figcaption><b>Figure 2.</b> Deep-ocean reservoir. The deep box stores or releases heat in proportion to the surface–deep temperature gradient.</figcaption>
</figure>
<h2>3 Equilibrium sensitivity</h2>
<p>
Setting the left-hand sides of
<button class="eqref" data-target="eq-balance" type="button">Eq. (1)</button> and
<button class="eqref" data-target="eq-deep" type="button">Eq. (2)</button> to zero and
summing over the discrete forcing record yields the equilibrium climate sensitivity
<span class="im" data-im="S"><i>S</i></span> as a forcing-weighted ratio
<button class="eqref" data-target="eq-sens" type="button">Eq. (3)</button>.
</p>
<!-- Equation 3: summation, fraction, sensitivity -->
<figure class="eq-block" id="eq-sens" tabindex="-1">
<div class="eq-body">
<math-row class="mrow" aria-label="S equals one over N times sum from i equals one to N of F sub i over lambda eff">
<span class="var"><i>S</i></span>
<span class="op">=</span>
<span class="frac">
<span class="num">1</span>
<span class="bar"></span>
<span class="den"><i>N</i></span>
</span>
<span class="bigop">
<span class="sigma">Σ</span>
<span class="lim-top mono"><i>N</i></span>
<span class="lim-bot mono"><i>i</i>=1</span>
</span>
<span class="frac">
<span class="num"><i>F</i><sub><i>i</i></sub></span>
<span class="bar"></span>
<span class="den">λ<sub>eff</sub></span>
</span>
</math-row>
<span class="eq-num">(3)</span>
</div>
<button class="copy-tex" type="button" data-tex="S = \frac{1}{N} \sum_{i=1}^{N} \frac{F_i}{\lambda_{\mathrm{eff}}}">
<span class="copy-ico" aria-hidden="true">⎘</span> Copy LaTeX
</button>
<figcaption><b>Figure 3.</b> Equilibrium climate sensitivity as the mean of the forcing record divided by the effective feedback parameter.</figcaption>
</figure>
<h2>4 Cumulative absorbed heat</h2>
<p>
Integrating the net surface flux over the study window gives the total ocean heat uptake
<button class="eqref" data-target="eq-int" type="button">Eq. (4)</button>, expressed
with the definite-integral operator and Greek limits.
</p>
<!-- Equation 4: integral -->
<figure class="eq-block" id="eq-int" tabindex="-1">
<div class="eq-body">
<math-row class="mrow" aria-label="Q equals integral from tau zero to tau one of gamma times open paren T s minus T d close paren d t">
<span class="var"><i>Q</i></span>
<span class="op">=</span>
<span class="bigop intop">
<span class="integral">∫</span>
<span class="lim-top mono">τ<sub>1</sub></span>
<span class="lim-bot mono">τ<sub>0</sub></span>
</span>
<span class="var">γ</span>
<span class="paren">(</span>
<span class="var"><i>T</i><sub>s</sub> − <i>T</i><sub>d</sub></span>
<span class="paren">)</span>
<span class="var dt"><i>d</i><i>t</i></span>
</math-row>
<span class="eq-num">(4)</span>
</div>
<button class="copy-tex" type="button" data-tex="Q = \int_{\tau_0}^{\tau_1} \gamma\,(T_s - T_d)\, dt">
<span class="copy-ico" aria-hidden="true">⎘</span> Copy LaTeX
</button>
<figcaption><b>Figure 4.</b> Cumulative absorbed heat over the integration window <span class="mono">[τ<sub>0</sub>, τ<sub>1</sub>]</span>.</figcaption>
</figure>
<h2>5 Calibrated parameters</h2>
<p>
Parameters were fit to the synthetic <em>Helios Drift</em> buoy record
(N = 1,440 daily means). Reported uncertainties are 1σ from a bootstrap of
500 resamples.
</p>
<div class="table-wrap" role="region" aria-label="Calibrated parameters" tabindex="0">
<table>
<thead>
<tr><th scope="col">Symbol</th><th scope="col">Description</th><th scope="col">Value</th><th scope="col">Unit</th></tr>
</thead>
<tbody>
<tr><td class="mono"><i>λ</i></td><td>Surface feedback</td><td class="mono num">1.18 ± 0.07</td><td class="mono">W·m−²·K−¹</td></tr>
<tr><td class="mono"><i>γ</i></td><td>Inter-box exchange</td><td class="mono num">0.64 ± 0.05</td><td class="mono">W·m−²·K−¹</td></tr>
<tr><td class="mono"><i>C</i><sub>s</sub></td><td>Surface heat capacity</td><td class="mono num">8.2 ± 0.3</td><td class="mono">W·yr·m−²·K−¹</td></tr>
<tr><td class="mono"><i>C</i><sub>d</sub></td><td>Deep heat capacity</td><td class="mono num">104 ± 9</td><td class="mono">W·yr·m−²·K−¹</td></tr>
<tr><td class="mono"><i>S</i></td><td>Equilibrium sensitivity</td><td class="mono num">3.13 ± 0.21</td><td class="mono">K</td></tr>
</tbody>
</table>
</div>
</article>
</main>
<div id="toast" class="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Equation Block
A typeset article page that renders four display equations the way a math library would, but using only semantic HTML and CSS — no KaTeX, MathJax, or any external dependency. Fractions are built as stacked numerator and denominator boxes separated by a real horizontal rule, summation and integral signs carry their upper and lower limits in mono, and variables are set in italic serif while operators and units fall back to monospace. Each block reserves space on the right for a classic equation number — (1), (2), (3), (4).
The interactions tie the prose to the figures. Inline math appears mid-sentence, and every reference such as Eq. (1) is a real button: hover or focus it and the matching display block lights up; click it and the page scrolls smoothly to the equation with a brief pulse. The relationship runs both ways — hovering an equation block highlights the reference buttons that point at it.
Every equation also offers a Copy LaTeX control that appears on hover. Activating it copies the source to the clipboard, reveals the underlying LaTeX in an inline code panel, and confirms with a toast. The page is keyboard-usable with visible focus rings, the parameters table scrolls horizontally on narrow screens, and the whole layout reflows to a single column with bottom-anchored equation numbers down to 360px.
Illustrative UI only — fictional authors, data, and figures; not real scientific results.