'; inherits: false; initial-value: 0px; }
@keyframes hw-fade { from { --hw-fade: 1.6em; } to { --hw-fade: 0px; } }
@supports (animation-timeline: scroll()) {
.hw-paper mjx-container[data-mjx-wide]:not([display="true"]) {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--hw-fade)), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - var(--hw-fade)), transparent);
animation: hw-fade linear both;
animation-timeline: scroll(self inline);
}
}
/* ---- the Handwritten view: lined paper, blue ink ---- */
html.hw-view .hw-paper {
position: relative;
margin: 4px 0 8px;
padding: calc(var(--hw-lh) * .35) 14px calc(var(--hw-lh) * .5) var(--hw-gutter);
border: 1px solid var(--hw-edge);
border-radius: 4px;
background-color: var(--hw-paper);
background-image:
linear-gradient(to right, transparent calc(var(--hw-gutter) - 10px), var(--hw-margin) calc(var(--hw-gutter) - 10px), var(--hw-margin) calc(var(--hw-gutter) - 8.5px), transparent calc(var(--hw-gutter) - 8.5px)),
repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hw-lh) - 1px), var(--hw-rule) calc(var(--hw-lh) - 1px), var(--hw-rule) var(--hw-lh));
background-position: 0 0, 0 calc(var(--hw-lh) * .35);
background-attachment: local;
box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
color: var(--hw-ink);
font-family: var(--hw-font), 'Comic Sans MS', 'Segoe Print', cursive;
font-size: 1.12rem;
line-height: var(--hw-lh);
overflow-x: auto;
}
html.hw-view .hw-paper p,
html.hw-view .hw-paper li { margin: 0; }
html.hw-view .hw-paper ol,
html.hw-view .hw-paper ul { margin: 0; padding-left: 1.4em; }
html.hw-view .hw-paper b,
html.hw-view .hw-paper strong { font-weight: 700; color: inherit; }
/* A solution's own leading line break (bank schemes start "
"). */
html.hw-view .hw-paper > p:first-child > br:first-child { display: none; }
/* The worked example's blue "Solution" rule gives way to the paper. */
html.hw-view .hw-host { border-left-color: transparent; padding-left: 0; }
/* The step-by-step reveal: no paper until the first step shows. */
html.hw-view .ws.hw-paper:not(:has([data-ws-s]:not([hidden]))) { padding: 0; border: 0; background: none; box-shadow: none; }
/* The fill-in box and its buttons keep the site's own type. */
html.hw-view .hw-paper .ws-blank,
html.hw-view .hw-paper input,
html.hw-view .hw-paper button { font-family: inherit; }
html.hw-view .hw-paper .ws-in { font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height: 1.3; }
/* Maths: same MathJax layout (fractions, powers, roots, brackets untouched),
in the ink colour, with letters and digits written in the hand. */
html.hw-view .hw-paper mjx-container { color: var(--hw-ink); }
/* A little larger than the typed view, so small inline fractions (π/3) and
powers stay readable on a phone. */
html.hw-view .hw-paper mjx-container[jax="CHTML"] { font-size: 112% !important; }
html.hw-view .hw-paper mjx-container[jax="CHTML"] mjx-mi mjx-c,
html.hw-view .hw-paper mjx-container[jax="CHTML"] mjx-mn mjx-c {
font-family: var(--hw-font), MJXZERO, MJXTEX-I, MJXTEX;
font-style: normal;
}
html.hw-view .hw-paper mjx-container[jax="CHTML"] mjx-mi mjx-c::before,
html.hw-view .hw-paper mjx-container[jax="CHTML"] mjx-mn mjx-c::before { font-family: var(--hw-font), MJXZERO, MJXTEX-I, MJXTEX; }
/* Long inline maths wraps onto the next ruled line instead of hiding in its
own sideways-scrolling box (js/handwritten.js groups each formula into
s that end after =, +, − … outside brackets). The line may
break only between chunks; a chunk too wide on its own scrolls with the
paper. Beats the site's mjx-container[data-mjx-wide] rule. */
html.hw-view .hw-paper mjx-container[data-hw-wrap]:not([display="true"]) {
display: inline;
max-width: none;
overflow: visible;
white-space: normal;
}
html.hw-view .hw-paper mjx-container[data-hw-wrap] [data-hw-flow] { display: inline; white-space: normal; }
html.hw-view .hw-paper mjx-hw-chunk { display: inline-block; white-space: nowrap; }
html.hw-view .hw-paper mjx-container svg { color: var(--hw-ink); }
html.hw-view .hw-paper mjx-container svg path { stroke: currentColor; stroke-width: 14; stroke-linejoin: round; }
/* Marks (M1, A1, R1 …) already in the solution: red pen in the margin. */
html.hw-view .hw-paper .hw-mk {
position: absolute;
left: 4px;
width: calc(var(--hw-gutter) - 14px);
margin-top: calc(.35em + var(--hw-mk-i, 0) * 1.05em);
color: var(--hw-pen);
font-family: var(--hw-font), 'Comic Sans MS', cursive;
font-weight: 700;
font-size: .86em;
line-height: 1.2;
text-align: center;
white-space: nowrap;
transform: rotate(-6deg);
}
@media (max-width: 480px) {
:root { --hw-gutter: 2.5rem; }
html.hw-view .hw-paper { font-size: 1.06rem; padding-right: 10px; }
}
@media print {
html.hw-view .hw-paper { box-shadow: none; }
.hw-bar { display: none; }
}