/* The lesson layout (patterns.md, "A lesson's layout"), with the neuron's pictures. */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #e4dbca; color: #26282d; font-family: 'Urbanist', sans-serif; }
/* The page: the stage as wide as the window, and no taller than it. */
.lesson { position: relative; width: min(100%, calc(100vh * 16 / 9)); margin: 0 auto; }
/* On a phone held upright, the note over the frame, outside the root. */
.turn { display: none; }
@media (orientation: portrait) and (max-width: 600px) {
    .turn { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: 10px 16px; border-radius: 10px; background: #26282d; color: #efe8db; font-size: 16px; font-weight: 600; white-space: nowrap; }
}

#stage { position: relative; overflow: hidden; background: #efe8db; color: #26282d; font-family: 'Urbanist', sans-serif; }
[data-composition-id]:not([data-kinetic-ready]) { visibility: hidden; }
.layer { position: absolute; inset: 0; pointer-events: none; }
.layer svg { position: absolute; left: 0; top: 0; overflow: visible; }

/* The left column, from the safe area's top left. */
.cap h2 { position: absolute; left: 64px; top: 64px; width: 560px; margin: 0; font-size: 44px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.cap p { position: absolute; left: 64px; top: 124px; width: 520px; margin: 0; font-family: 'Literata', serif; font-size: 21px; font-weight: 400; line-height: 1.35; }
.prompt { position: absolute; left: 64px; top: 200px; margin: 0; padding: 6px 12px; border-radius: 8px; background: #EFC187; font-size: 18px; font-weight: 600; }
.choices { position: absolute; left: 64px; top: 256px; display: flex; flex-direction: column; gap: 8px; width: 300px; }
.choices button { pointer-events: auto; padding: 10px 18px; border: 0; border-radius: 10px; background: #e4dbca; color: #26282d; font: 600 22px/1.2 'Urbanist', sans-serif; text-align: left; cursor: pointer; }
.choices button:disabled { cursor: default; }
.choices button.right { background: #B1A8FF; }
.choices button.wrong { background: #EF9481; }
.note { position: absolute; left: 64px; top: 436px; width: 500px; margin: 0; font-family: 'Literata', serif; font-size: 21px; font-weight: 500; line-height: 1.35; }
.note.high { top: 352px; }
.ctl { position: absolute; left: 64px; top: 256px; width: 380px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; pointer-events: auto; font-size: 20px; font-weight: 600; }
.ctl b { justify-self: start; padding: 2px 10px; border-radius: 8px; background: #B1A8FF; font-variant-numeric: tabular-nums; }
.ctl input { grid-column: 1 / -1; width: 100%; }
.send { position: absolute; left: 64px; top: 256px; pointer-events: auto; padding: 10px 18px; border: 0; border-radius: 10px; background: #B1A8FF; color: #26282d; font: 600 22px/1.2 'Urbanist', sans-serif; cursor: pointer; }
.send:disabled { background: #e4dbca; color: #6e685f; cursor: default; }

/* The band along the bottom of the safe area. */
.band { position: absolute; left: 64px; right: 64px; top: 600px; height: 56px; display: flex; align-items: center; gap: 32px; pointer-events: auto; }
.where { width: 240px; }
.count { font-size: 15px; font-weight: 600; color: #6e685f; }
.title { margin-top: 2px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.transport { flex: 1; display: flex; align-items: center; gap: 8px; }
.nav { display: flex; gap: 8px; }
.band button { padding: 10px 18px; border: 0; border-radius: 10px; background: #e4dbca; color: #26282d; font: 600 18px/1.2 'Urbanist', sans-serif; white-space: nowrap; cursor: pointer; }
.band button.play { width: 96px; }
.band button.go { background: #B1A8FF; }
.band button:disabled { background: #e4dbca; color: #6e685f; cursor: default; }
input[type="range"] { -webkit-appearance: none; appearance: none; height: 24px; margin: 0; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: #ddd3c2; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: #26282d; }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: #ddd3c2; }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #26282d; }

/* The pictures. */
.cell { fill: none; stroke: #B1A8FF; stroke-linecap: round; stroke-linejoin: round; }
.draw { stroke-dasharray: 1; }
.body { fill: #B1A8FF; }
.sheath { fill: #d9d4fb; }
.protein { fill: #7d73d6; }
.membrane { fill: #B1A8FF; }
.probe { stroke: #26282d; stroke-width: 3; stroke-linecap: round; }
.grid { stroke: #ddd3c2; stroke-width: 2; }
.thr { stroke: #6e685f; stroke-width: 2; stroke-dasharray: 8 7; }
.trace { fill: none; stroke: #26282d; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.overlay { fill: none; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.cursor { stroke: #EFC187; stroke-width: 4; }
svg text { font-family: 'Urbanist', sans-serif; font-size: 16px; font-weight: 600; fill: #6e685f; font-variant-numeric: tabular-nums; }
svg text.ink { fill: #26282d; }

/* Labels in HTML over the pictures: small, 16 px, ink on a fill when they name an ion. */
.lbl { position: absolute; left: 0; top: 0; margin: 0; font-size: 16px; font-weight: 600; line-height: 1.25; color: #6e685f; white-space: nowrap; }
.pill { position: absolute; left: 0; top: 0; padding: 3px 9px; border-radius: 8px; font-size: 16px; font-weight: 600; line-height: 1.25; color: #26282d; white-space: nowrap; }
.na { background: #EF9481; }
.k { background: #90CDEF; }
.mine { background: #B1A8FF; font-variant-numeric: tabular-nums; }
.readout { position: absolute; left: 372px; top: 236px; margin: 0; font-size: 44px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.readout-sub { position: absolute; left: 372px; top: 292px; margin: 0; font-size: 16px; font-weight: 600; color: #6e685f; }
.axname { position: absolute; left: 680px; margin: 0; font-size: 22px; font-weight: 700; }