*
* …
*
*/
lesson-shell {
display: block;
}
lesson-beat {
display: block;
padding: 0.5rem 0;
scroll-margin-top: 1.5rem;
}
/* First h2 inside a beat is the beat title — pull it tighter so it
doesn't inherit the mid-article top margin from prose h2 rules. */
lesson-beat > h2:first-child {
margin-top: 0.25rem;
margin-bottom: 1.5rem;
font-size: 1.5rem;
letter-spacing: -0.01em;
color: #1A1A1A;
}
@media (min-width: 768px) {
lesson-beat > h2:first-child {
font-size: 1.875rem;
}
}
/* First paragraph of a beat: a touch heavier to anchor the eye. */
lesson-beat > p:first-of-type,
lesson-beat > h2:first-child + p {
font-size: 1.0625rem;
line-height: 1.7;
}
/*
* Beat-by-beat pagination — standalone (not Tailwind-processed) so the
* custom-element + data-attribute selectors are never purged.
*
* Single mode (since C7, 2026-05-08). Gated on three :root data
* attributes — all JS-set, so no-JS readers never trigger the hide-
* rules and the page renders as continuous prose fallback:
*
* :root[data-lesson-hydrated="true"] ← set by 's
* connectedCallback after
* the step list builds.
* THE no-JS guard. Without
* JS, never set, hide-rules
* never match.
* :root[data-lesson-current-step=""] ← updated on every
* stepchange. Informational
* (per-element data-current
* drives the hide-rule).
* :root[data-lesson-on-last-step="true"] ← set when the active step
* is the final entry in
* 's step
* list. Drives the
* finish-footer hide-rule
* below — footer is hidden
* unless this attribute is
* present. Added in C8b
* (2026-05-08).
*
* Hide-rule (steps): any or [data-lesson-step] without a
* `data-current` attribute is `display: none`. Lesson-shell sets
* `data-current` on whichever element is the active step at any time.
*
* Hide-rule (finish footer): the [data-lesson-finish] footer is
* hidden whenever the page is hydrated AND the active step is NOT the
* last in the step list. Without JS, the hydrated attribute never
* appears → the rule never matches → the footer renders at the bottom
* of the article in continuous-prose fallback mode (alongside every
* + [data-lesson-step] region, which are also visible
* because their hide-rule is gated on the same hydrated attribute).
* The footer is no longer paginated as its own step (C8b dropped
* `data-lesson-step="finish"` from LessonLayout); it renders directly
* below whichever step is last on the JS-paginated path.
*
* Step regions are SIBLINGS of the article that wraps lesson-shell, so
* a descendant CSS selector won't reach them. The :root-level guard
* scopes from the document root, which lets the same selectors hit
* both lesson-beat (a descendant of lesson-shell) and the [data-lesson-
* step] sections (siblings of the article).
*/
:root[data-lesson-hydrated="true"] lesson-beat:not([data-current]) {
display: none;
}
:root[data-lesson-hydrated="true"] [data-lesson-step]:not([data-current]) {
display: none;
}
:root[data-lesson-hydrated="true"]:not([data-lesson-on-last-step="true"]) [data-lesson-finish] {
display: none;
}
/* Each visible step gets a min-height to avoid one-line screens (the
* 9-word close beat on 2026-04-17 is the worst real case). NOT 100vh —
* brief explicitly: content-sized, page scrolls vertically when a step
* overflows. 60vh is the sweet spot. */
:root[data-lesson-hydrated="true"] lesson-beat[data-current],
:root[data-lesson-hydrated="true"] [data-lesson-step][data-current] {
min-height: 60vh;
}
/* Progress dots — slim row near the top. Hidden until lesson-shell
* hydrates so no-JS readers never see the empty container. */
lesson-progress {
display: none;
}
:root[data-lesson-hydrated="true"] lesson-progress {
display: block;
margin-bottom: 1rem;
}
.lesson-progress-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center; /* centred row — easier to scan as a group */
gap: 0.5rem;
padding: 0.625rem 0.25rem;
}
.lesson-progress-dot {
appearance: none;
border: 0;
background: transparent;
padding: 0;
cursor: pointer;
width: 1.5rem;
height: 1.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
-webkit-tap-highlight-color: transparent;
}
/* Group separator — extra margin on the first dot of a new kind. The
* audio-beat run vs. the interactive/quiz run are different modes
* (listening vs. doing); a small visible gap signals the boundary
* without needing copy or icons. Triggers only when a beat dot is
* IMMEDIATELY followed by a non-beat dot, so a no-companion piece
* (beats only) gets no gap, and an interactive→quiz adjacency gets
* no extra gap (they're both "doing" mode). */
.lesson-progress-dot[data-step-kind="beat"] + .lesson-progress-dot:not([data-step-kind="beat"]) {
margin-left: 0.75rem;
}
/* The actual coloured pill is a pseudo-element so the tap target is
* larger than the visible dot — touch ergonomics on mobile. */
.lesson-progress-dot::before {
content: "";
display: block;
width: 0.5rem;
height: 0.5rem;
border-radius: 999px;
background: rgba(26, 107, 98, 0.3); /* zee-primary @ 30% */
transition: background-color 120ms ease, width 120ms ease;
}
/* Non-beat dots (interactive / quiz) are rounded squares instead of
* circles. Same colour rhythm — different silhouette signals the
* different mode. No copy / no legend needed. */
.lesson-progress-dot:not([data-step-kind="beat"])::before {
border-radius: 2px;
}
.lesson-progress-dot:hover::before,
.lesson-progress-dot:focus-visible::before {
background: rgba(26, 107, 98, 0.6);
}
.lesson-progress-dot[data-active="true"]::before {
width: 1.25rem;
border-radius: 999px;
background: #1A6B62; /* zee-primary */
}
/* Active non-beat dot keeps its rounded-square shape when expanded —
* preserves the silhouette signal even on the active dot. */
.lesson-progress-dot[data-active="true"]:not([data-step-kind="beat"])::before {
border-radius: 3px;
}
.lesson-progress-dot:focus-visible {
outline: 2px solid #1A6B62;
outline-offset: 2px;
}
/**
* In-beat widget styles (PR #3, 2026-05-09).
*
* / / are the three
* earned-not-budgeted widgets a beat may carry. See drafter-prompt.ts
* "When a beat earns a widget" for usage rules.
*
* Styling intent:
* - Quiet, reader-respectful. Widgets sit inside prose, not over it.
* - No animations beyond the native open/close.
* - Contrast against beat body via the same teal/cream palette as
* the rest of the lesson chrome.
* - Mobile-respectable at 393px.
*/
/* ───── lesson-reveal ─────────────────────────────────────────── */
lesson-reveal {
display: block;
margin: 1.25rem 0;
}
lesson-reveal .widget-reveal {
border: 1px solid color-mix(in oklch, var(--zee-border, #e6dfd3) 60%, transparent);
border-radius: 0.5rem;
padding: 0;
background: color-mix(in oklch, var(--zee-bg-card, #faf8f4) 60%, transparent);
}
lesson-reveal summary {
cursor: pointer;
padding: 0.875rem 1rem;
font-weight: 500;
color: var(--zee-text, #1f1d18);
list-style: none;
position: relative;
}
lesson-reveal summary::-webkit-details-marker {
display: none;
}
lesson-reveal summary::after {
content: '↓';
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--zee-primary, #1A6B62);
transition: transform 0.15s ease;
font-weight: 600;
}
lesson-reveal details[open] summary::after {
transform: translateY(-50%) rotate(180deg);
}
lesson-reveal .widget-reveal-body {
padding: 0 1rem 1rem 1rem;
color: var(--zee-text, #1f1d18);
}
lesson-reveal .widget-reveal-body :first-child { margin-top: 0; }
lesson-reveal .widget-reveal-body :last-child { margin-bottom: 0; }
/* No-JS fallback — bare lesson-reveal renders as a flow container with
the prompt and body visible. */
lesson-reveal:not([data-upgraded]) {
display: block;
border: 1px solid color-mix(in oklch, var(--zee-border, #e6dfd3) 60%, transparent);
border-radius: 0.5rem;
padding: 0.875rem 1rem;
margin: 1.25rem 0;
}
lesson-reveal:not([data-upgraded])::before {
content: attr(prompt);
display: block;
font-weight: 500;
margin-bottom: 0.5rem;
}
/* ───── lesson-compare ────────────────────────────────────────── */
lesson-compare {
display: grid;
gap: 0.75rem;
grid-template-columns: 1fr;
margin: 1.25rem 0;
}
@media (min-width: 600px) {
lesson-compare {
grid-template-columns: 1fr 1fr;
}
}
lesson-state {
display: block;
padding: 0.875rem 1rem;
border: 1px solid color-mix(in oklch, var(--zee-border, #e6dfd3) 60%, transparent);
border-radius: 0.5rem;
background: color-mix(in oklch, var(--zee-bg-card, #faf8f4) 60%, transparent);
}
lesson-state .widget-compare-label {
font-weight: 500;
font-size: 0.875rem;
color: var(--zee-muted, #67645a);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
lesson-state .widget-compare-body {
color: var(--zee-text, #1f1d18);
}
lesson-state .widget-compare-body :first-child { margin-top: 0; }
lesson-state .widget-compare-body :last-child { margin-bottom: 0; }
/* ───── lesson-callout ────────────────────────────────────────── */
lesson-callout {
display: block;
margin: 1.25rem 0;
padding: 0.875rem 1rem;
border-left: 3px solid var(--zee-primary, #1A6B62);
background: color-mix(in oklch, var(--zee-bg-card, #faf8f4) 50%, transparent);
border-radius: 0 0.375rem 0.375rem 0;
}
lesson-callout[data-callout-type="aside"] {
border-left-color: var(--zee-muted, #67645a);
font-style: italic;
}
lesson-callout[data-callout-type="note"] {
border-left-color: var(--zee-gold, #C49A1A);
}
lesson-callout :first-child { margin-top: 0; }
lesson-callout :last-child { margin-bottom: 0; }
/*
* Zita chat widget CSS — standalone, not Tailwind-processed.
* Custom element selectors get purged by Tailwind, so this
* lives outside the Tailwind pipeline.
*/
zita-chat {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
z-index: 50;
font-family: 'DM Sans', system-ui, sans-serif;
}
.zita-toggle-btn {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
background: #1A6B62;
color: white;
border-radius: 9999px;
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
border: none;
cursor: pointer;
transition: opacity 0.15s ease, transform 0.15s ease;
}
.zita-toggle-btn:hover {
opacity: 0.92;
transform: translateY(-1px);
}
.zita-toggle-btn:focus-visible {
outline: 2px solid #1A6B62;
outline-offset: 3px;
}
.zita-icon-svg {
width: 20px;
height: 20px;
}
.zita-panel {
background: white;
border-radius: 1rem;
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
border: 1px solid #E8E4DE;
overflow: hidden;
width: 340px;
max-height: 480px;
display: flex;
flex-direction: column;
}
.zita-header {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
border-bottom: 1px solid #E8E4DE;
}
.zita-name {
font-weight: 700;
font-size: 0.875rem;
color: #1A6B62;
}
.zita-desc {
font-size: 0.75rem;
color: #6B6B6B;
flex: 1;
}
.zita-close {
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
color: #6B6B6B;
border-radius: 0.25rem;
font-size: 1.125rem;
border: none;
background: none;
cursor: pointer;
transition: color 0.15s;
}
.zita-close:hover {
color: #1A1A1A;
}
.zita-messages {
flex: 1;
overflow-y: auto;
padding: 0.75rem 1rem;
max-height: 340px;
}
.zita-messages > * + * {
margin-top: 0.75rem;
}
.zita-msg {
font-size: 0.875rem;
line-height: 1.625;
max-width: 85%;
padding: 0.5rem 0.75rem;
border-radius: 0.75rem;
}
.zita-msg-user {
background: #1A6B62;
color: white;
margin-left: auto;
}
.zita-msg-assistant {
background: #FAF8F4;
color: #1A1A1A;
}
.zita-typing {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.zita-input {
display: flex;
gap: 0.5rem;
padding: 0.625rem 0.75rem;
border-top: 1px solid #E8E4DE;
}
.zita-input input {
flex: 1;
font-size: 0.875rem;
padding: 0.375rem 0.75rem;
border-radius: 0.5rem;
border: 1px solid #E8E4DE;
background: #FAF8F4;
outline: none;
}
.zita-input input:focus {
border-color: #1A6B62;
box-shadow: 0 0 0 2px rgba(26, 107, 98, 0.15);
}
.zita-input button {
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
background: #1A6B62;
color: white;
border-radius: 0.5rem;
border: none;
cursor: pointer;
font-size: 0.875rem;
font-weight: 700;
}
.zita-input button:hover {
opacity: 0.9;
}
@media (max-width: 400px) {
.zita-panel {
width: calc(100vw - 2rem);
}
}
/*
* "How this was made" transparency drawer — standalone CSS.
* Not processed by Tailwind (like beats.css / zita.css). Custom-element
* selectors are safe from purging.
*
* Shape:
*
* ← open affordance (inline on page)
*
← slide-in drawer
* …
*
* …
* …
*
*
*
*/
/* --- Open affordance — small inline link inside the meta line ------- */
/* Sits on line 2 of the meta block alongside Source + Save (since
2026-05-08). Composes into the parent
's flex row via inline-flex
on the host element. Bottom-margin moved to the parent