/* ============================================================================ DECK SLIDES - A MIRROR, and the only one of the three that is a SUBSET. The AUTHORITATIVE copy is `class-app/public/css/slides.css`. Change that one, then bring the change here by hand. Everything below is a verbatim copy of it EXCEPT three flagged blocks - the one `MIRROR ADDITION` and the two `MIRROR EDIT`s - and the blocks listed under WHAT IS LEFT OUT. So a re-sync is a read of that file's diff, never a `cat`. Search for those two words before you touch anything: each block says what it compensates for and what breaks if it is "tidied" back to the room's version. ── WHAT THIS FILE IS FOR Since 2026-09-06 the student area draws a slide the way the room draws it: `StudentSessionDeck.vue` renders `
` inside a fixed 1920x1080 canvas (`container-type: inline-size`) that is transform-scaled to fit a 16:9 box, which is exactly what `SlideStage.vue` plus `SlideRenderer.vue` do on class.10xcourse.ai. That is what makes every slide the SAME SIZE whatever it contains, and pixel-faithful to the projector. Before that the student area had no `.slide` shell at all: no title rule, no body rule, no build-step machinery, no brand marks. `deck-slide-templates.css` was mirrored and this file was not, so a body's `.tpl-*` vocabulary was styled while the frame it sits in was not - and a slide's height was whatever its markup happened to come to, from about 150px to a capped scroller. ── THE COORDINATE SYSTEM, WHICH IS WHY NOTHING HERE MAY BRANCH ON THE VIEWPORT Every `.slide--display` rule is written in `cqw` (1cqw = 19.2px) against the 1920px canvas, never in `vw` and never inside a `@media` query. A `vw` rule looks perfect at 1920 and silently breaks at every other size, which is why it survives casual review. The one `@media` block at the foot of this file touches `.slide--phone` only. ── WHAT IS LEFT OUT, AND WHY 1. Every `.cl-*` block: `.cl-poll`, `.cl-ballot`, `.cl-cloud`, `.cl-numeric`, `.cl-sandbox`, `.cl-embed`. Those are the ROOM's interaction blocks, which it mounts INSIDE the slide. This site mounts none of them: a student's copy of the deck summarises an interaction in `.stu-deck__ask`, outside the canvas and below it, because a ballot drawn at the canvas's 0.2 scale is unreadable and answering happens in the room anyway. 2. `.slide--display .cl-numeric__prompt` / `__empty--waiting`, for the same reason - both selectors name a block this site never renders. 3. The four `.slide--display.slide--kind-{poll,quiz,wordcloud,numeric} .slide__body` rules, which make the body shrink and clip. They exist because the room stacks a prompt, five option rows and a ballot indicator under the body inside one canvas. Here the body has the whole canvas to itself, so importing them would clip an interaction slide's body against a constraint that is not there. Nothing else is dropped. If a `.slide*` rule appears in the authoritative file and not here, that is drift, not a decision. ── WHAT IS ADDED, AND WHY One block, at the top: a zero-specificity reset of the three element defaults `public/css/global.css` gives this whole site (`li`, `ul` and `p` margins, and p's own line-height, colour and weight) and the lecture room does not. They land inside an authored slide body and move it - measured at 48px of surplus height on order 2 alone. That block's own comment carries the numbers and the specificity argument. And two edits, both on the terminal chevron's corner mark: this site's `Logo10xTerminal.vue` keeps the square `0 0 110 110` viewBox while class-app's copy crops it to the ink, so the wrapper is resized and re-anchored to put the same drawn chevron on the same canvas pixels. Verified by measuring both renders: the ink's top-left is 1737.1 / 909 in canvas units, in both apps. ── WHAT BREAKS IF IT DRIFTS A `.slide__title` or `.slide__body` size that is behind changes what a student reads relative to what the room showed. A missing `.slide--step-N` rule shows a build step early - harmless here, because this surface deliberately sets the step to the slide's LAST one so a reader sees everything. A brandmark size or inset that is behind puts the corner marks somewhere the room does not, and a `.slide` rule that is behind changes the slide's whole frame. ── LOAD ORDER index.html links this AFTER `student-session-deck.css` (which owns the stage and the canvas around the article) and BEFORE `deck-slide-templates.css` and `deck-kit.css` (which own what is INSIDE `.slide__body`), matching the room's own order in `class-app/index.html`: app.css, slides.css, deck-kit.css, slide-templates.css. Templates last is load-bearing - several of its rules override `.slide__body` defaults at equal specificity. ============================================================================ */ /* ════════════════════════════════════════════════════════════════════════════ MIRROR ADDITION - THE ONLY ONE, AND IT IS NOT IN THE AUTHORITATIVE FILE. THE MAIN SITE HAS SITE-WIDE DEFAULTS THAT THE LECTURE ROOM DOES NOT, and they land inside a slide body and change it. THREE stylesheets every page of this site loads declare them, and this is the WHOLE list: every sheet index.html links ahead of the deck three was parsed for a selector with no class, no id and no attribute in it, and these nine rules are all that came back. public/css/fonts.css * { font-family: var(--font-body); font-weight: 400 } public/css/global.css * { margin: 0; padding: 0; box-sizing: border-box } li { margin-bottom: 8px } ul { padding: 0 30px 0 0; margin: 0 0 8px 0 } p { font-family; font-weight: 400; margin-bottom: 12px; line-height: 1.65; color: --text-color } html, body { direction; background; color } @767 body { font-size: 17px; line-height: 1.7 } public/css/content.css h1 { font-size: 28px; MARGIN-BOTTOM: 12PX; font-family: --font-display; font-weight: 600; letter-spacing: -0.02em } @767 h1 { font-size: 1.35rem; line-height: 1.3 } @767 p { line-height: 1.7 } The two `*` rules and `html, body` need nothing: `tokens.css` declares the same `* { margin: 0; padding: 0; box-sizing }` and the same direction and colours, so a `figure`, a `dl`, a `table`, a `blockquote` or an `hr` in a slide body starts from zero on BOTH stacks and there is nothing to undo. The deck's other tags - `span`, `div`, `img`, `bdi`, `small`, `b`, `dt`, `dd`, `td`, `th`, `tr`, `thead`, `tbody`, `figcaption`, `input`, `svg` and its children - are named by no bare rule at all. class-app has none of the rest. Its `tokens.css` resets `*` to margin 0 / padding 0 and sets the body font on `html, body` ONCE, so a slide's own type cascades by INHERITANCE from there down. Three consequences, all measured on this deck: 1. THE `*` RULE BREAKS INHERITANCE, WHICH IS HOW A TEMPLATE SETS ITS TYPE. An applied declaration beats an inherited value however weak the selector, so `* { font-family: var(--font-body) }` re-set the body face on every DESCENDANT of a container that had just been given the mono one. Measured on order 15: `.tpl-anat` computed the mono stack correctly and its own children came back out in the body face, 214px wide where the projector draws 277px. Every `.tpl-anat`, `.tpl-term`, `.tpl-code` and mono eyebrow in the deck was affected, and nothing anywhere said so. `font-weight: 400` on the same rule did the same to weight. 2. `li` AND `ul` MARGINS ADD UP. On order 2, six `.tpl-step` rows carried 8px of margin the room does not have: 48px of surplus height, which pushed the template's pinned eyebrow 30px up and its trailing mascot 30px down. 3. `h1` IS THE SLIDE TITLE, AND ITS 12px SHORTENED EVERY BODY ON THE SITE. `content.css` gives every `h1` on this site `margin-bottom: 12px`, and the title `SlideRenderer.vue` and `StudentSessionDeck.vue` both mount is `

`. `.slide__title` declares no margin of its own, so it took the site's. The room's title measured `margin-bottom: 0px` and `.slide__body` at y=246.3 h=718.5; the site's measured 12px, y=258.3 and h=706.5, on EVERY slide that has a title - 93 of this deck's 111. The body absorbs the loss because it is the flex item that grows, and it carries `overflow-y: auto`, so nothing spills and nothing errors. On the four densest slides the 12px was the whole margin the layout had: `.tpl` is `overflow: hidden`, and its scrollHeight ran 4px, 3px, 7px and 5px past its clientHeight on orders 2, 36, 49 and 69 where the room clipped nothing. A student's copy cut the bottom off a closing line the projector shows whole. The rest of that `h1` block needs no undoing and gets none: `.slide__title` is (0,1,0) and already declares its own `font-size`, `font-family`, `line-height`, `letter-spacing` and `color`, and the `font-weight: revert` rule below already covers the 600. Only the margin had nothing to lose to. DO NOT DELETE THE HEADINGS FROM THE MARGIN RULE AS MIRROR DRIFT: the authoritative `class-app/public/css/slides.css` correctly has no reset at all, because the room's page has no site-wide typographic defaults to undo. This file needs one precisely because it does not stand alone. SO THIS BLOCK PUTS THE SLIDE BACK ON THE ROOM'S STARTING POINT, and its SPECIFICITY IS THE WHOLE TRICK. `:where()` contributes ZERO, and `:is()` takes the weight of its heaviest argument, so the compounds below measure exactly (0,0,0) and (0,0,1) - the SAME weights as the `*` and `li` / `ul` / `p` rules they are undoing. Source order then decides, and index.html links this file after both of them. Everything else keeps working untouched: every rule in this file, in deck-kit.css and in deck-slide-templates.css carries at least one class and therefore outranks all of it, including a template that legitimately gives a list its own padding or a heading its own weight. Write it as `.slide *` instead and it becomes (0,1,0), which quietly beats a single-class template rule - and that template's type would vanish with no error anywhere. `revert` on the second rule, not `inherit`: `b`, `strong`, `th` and the headings are bold in the USER-AGENT sheet, which is where the room gets their weight from, and `inherit` would flatten them to their parent's. `revert` rolls back to exactly that UA value and still loses to `.slide__body strong` below and to every template rule. It has to come AFTER the rule above and be no weaker than it, which is why that one uses a single `:not()` carrying a list - `:not(svg, svg *)` weighs (0,0,1), the same as `:is(b, strong, ...)`, and source order then does the rest. Chain it as `:not(svg):not(svg *)` and it silently becomes (0,0,2), which outranks the bold rule and flattens every `` in the deck. SVG GETS ITS OWN RULE, AND `revert-layer` IS LOAD-BEARING THERE. An inline `` in a slide body sets its type with a PRESENTATION ATTRIBUTE (`font-family="'Departure Mono', ..."` on ``), and a presentation attribute is beaten by ANY author declaration - `inherit` and `revert` included, because both of those roll past it. `revert-layer` is the one that stops AT it: with no `@layer` anywhere it rolls back exactly one step, to the presentational hint, which is what the room's cascade leaves standing because the room has no `*` rule at all. Order 11 draws eight labelled bit cells that way and is the slide this was measured on: without it their digits came out in the body face, 23.8px wide where the projector draws 27.3px. A browser that does not know `revert-layer` drops the declaration and lands on today's behaviour, which is the right way to fail. ════════════════════════════════════════════════════════════════════════════ */ :where(.slide) :not(svg, svg *) { font-family: inherit; font-weight: inherit; } :where(.slide) :is(svg, svg *) { font-family: revert-layer; font-weight: revert-layer; } :where(.slide) :is(b, strong, th, h1, h2, h3, h4, h5, h6) { font-weight: revert; } /* THE HEADINGS ARE HERE FOR `content.css h1 { margin-bottom: 12px }`, WHICH IS THE SLIDE TITLE. `h2` to `h6` ride along: no bare rule names them today, and the room's starting point for all six is the same zero `tokens.css` gives them, so the wider list costs nothing and closes the next one. `:is(...)` still weighs (0,0,1), the same as the bare `h1` it is undoing, and this file is linked after content.css. See consequence 3 above before touching it. */ :where(.slide) :is(p, ul, ol, li, h1, h2, h3, h4, h5, h6) { margin-block-end: 0; padding-inline-start: 0; padding-inline-end: 0; } :where(.slide) :is(p) { font-size: inherit; line-height: inherit; color: inherit; font-variation-settings: normal; } /* ── The slide ─────────────────────────────────── */ .slide { position: relative; block-size: 100%; display: flex; flex-direction: column; gap: 2cqw; background: var(--bg-surface); color: var(--text-color); overflow: hidden; } .slide--display { padding: 6cqw 7cqw; justify-content: center; } .slide--phone { block-size: auto; gap: var(--space-md); padding: var(--space-lg); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } /* A slide with nothing on it. Wordless is worse than a sentence: a blank projector reads as a crash. */ .slide--blank { align-items: center; justify-content: center; } .slide__blank-note { font-family: var(--font-mono); font-size: clamp(13px, 1.4cqw, 28px); letter-spacing: 0.06em; color: var(--text-tertiary); } .slide--phone .slide__blank-note { font-size: 13px; } /* CENTRED ON BOTH SURFACES, from this one declaration: the phone rule below overrides size and nothing else, so a title reads the same way on a projector and on a phone rather than being centred on one and ragged on the other. `text-wrap: balance` is what makes centring survive a title that wraps. A centred two-line heading whose second line is one word is the classic ugly result, and it is exactly the shape a long Hebrew title takes at 22px on a 390px phone; balancing evens the lines instead. Browsers without it simply wrap as before, so it costs nothing where it is not supported. A SECTION-CARD SLIDE IS UNAFFECTED, deliberately: slide-templates.css hides this h1 outright (`.slide--display:has(.tpl--section) .slide__title`) and the card prints its own title at `text-align: start`. Those slides keep the left-edge look they were designed with; this rule cannot reach them. */ .slide__title { font-family: var(--font-display); font-size: clamp(26px, 4.2cqw, 84px); font-weight: 500; line-height: 1.15; letter-spacing: -0.025em; color: var(--text-color); text-align: center; text-wrap: balance; } .slide--phone .slide__title { font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; } .slide__body { font-size: clamp(15px, 2cqw, 40px); line-height: 1.6; color: var(--text-secondary); overflow-y: auto; } .slide--phone .slide__body { font-size: 15px; } /* Author-native markup lands in the body, so the common tags need house rules rather than the browser's defaults. */ .slide__body p + p { margin-block-start: 0.8em; } .slide__body ul, .slide__body ol { /* RTL list indentation is padding-RIGHT, per the repo convention. */ padding-right: 1.1em; display: flex; flex-direction: column; gap: 0.4em; } .slide__body strong { font-weight: 500; color: var(--text-color); } .slide__body code, .slide__body pre { font-family: var(--font-mono); font-size: 0.9em; direction: ltr; /* An inline code identifier inside Hebrew narration is a Latin run in an RTL paragraph. `unicode-bidi: isolate` is what stops the surrounding Hebrew reordering it - this is a course full of identifiers, and a mis-ordered one is a line of code nobody can copy. */ unicode-bidi: isolate; } .slide__body pre { display: block; padding: 0.8em 1em; background: var(--bg-secondary); border-radius: var(--radius-md); overflow-x: auto; text-align: left; } .slide__body a { color: var(--primary-color); } /* ── The two corner brandmarks ─────────────────── */ /* TWO marks on the two corners the eye does not enter or leave a slide by: the bare 10x mark TOP-LEFT, the terminal chevron BOTTOM-RIGHT. Hebrew enters at top-right and exits at bottom-left, and both of those corners are also spoken for by content - the pinned eyebrow owns top-leading on 71 of 116 bodies and the reading exit is where a closing line lands. So the marks take the other diagonal, and a slide's furniture never stands where the reading starts. OWNER DECISION, 2026-09-06: both moved and both shrank. They were 15% of the canvas height stacked down the left edge, which read as a second column rather than as page furniture. The mark is now half that height and the chevron 70% of it, on opposite corners. The chevron's new corner is the one `.tpl-mascot--corner` already owns on 20 slides of the session-1 deck, so the rule at the bottom of this block moves it out of the mascot's way on exactly those slides. Read that note before changing either inset. THIS BLOCK REPLACES ONE THAT NEVER PAINTED A PIXEL. The old rule sized the WRAPPER (`inline-size: 6cqw`) and left its height content-derived, so the child `.logo-10x-mark`'s height was indefinite too and the svg's own `height: 100%` (logo-10x.css) resolved against a cycle. Chrome resolves a cyclic percentage height to 0, and `width: auto` on a replaced element then computed 0 from it: the mark measured 0x0 on every slide of every deck. Three things in here are what fix it, and each is load-bearing: 1. THE HEIGHT LANDS ON THE LOGO WRAPPER, NOT ON `.slide__brandmark`. The svg's `height: 100%` resolves against its own parent; a height on the outer box leaves the inner one indefinite and the svg still at 0x0. 2. THE SELECTOR IS (0,2,0). `.slide__brandmark svg` would be (0,1,1) - an exact tie with `.logo-10x-mark svg` in logo-10x.css, broken by source order, which logo-10x.css wins. Written that way the "fix" changes nothing and reads as the bug never having gone away. 3. NO `inline-size` ON THE WRAPPER, and no insets on the base class. The 10x mark is 1.933x as wide as it is tall (157px at its current 81px, 313px at the 162px it used to be), so a 115px wrapper anchored by `inset-inline-end` pushed 174px of it off the canvas, where `.slide { overflow: hidden }` cut it. And an `inset-block-end` left on the base while a modifier adds `inset-block-start` stretches the top wrapper to 965px tall. `display: flex` rather than the default block: an inline-formatting context adds a 3px baseline descender under the inline-block logo, which silently shifts the corner inset by 3px. `z-index: 0` keeps the marks under `.tpl > *` (z-index 1, slide-templates.css) on template slides. It does NOT on its own keep them under the h1: a positioned box at z-index 0 paints in CSS 2.1 layer 6, above the layer-5 text of a non-positioned flex sibling, and `.slide__title` is a sibling of `.slide__body` rather than a child of `.tpl`. So the two rules below lift the title and the body into the same positioned layer. Without them the top-left mark (now the 10x mark, x 57.6-214.6, y 57.6-138.6) sits on the leading edge of any single-line title wider than about 1490px, which is roughly a third of this deck. Order 103's title is one of them, and it is what the shrink was measured against. The marks match `.tpl-mascot--corner`'s z-index, so a corner mascot and a brandmark sharing a corner OVERLAP VISIBLY rather than one hiding the other. That is deliberate: a collision an author can see is a collision that gets fixed. Since 2026-09-06 the chevron DOES share a corner with `--corner`, and it clears it by arithmetic instead - see the note on `--term` at the bottom of this block before you change either inset. No body parks a mascot at `--corner-end` any more, so the top-left is the mark's alone. */ .slide__brandmark { position: absolute; display: flex; z-index: 0; opacity: 0.42; pointer-events: none; } /* 7.5% of the 1080 canvas = 81px, half the 162px it stood at until 2026-09-06. WRITTEN IN cqw ON PURPOSE. `.cl-stage__canvas` is `container-type: inline-size`, which registers the inline axis only, so `cqh`/`cqb` do NOT resolve against the canvas - per spec they fall back to the small-viewport height, and the projector and the presenter's preview would then disagree about the size of the mark by whatever the window height happens to be. 81 / 19.2 = 4.21875cqw. */ .slide__brandmark .logo-10x-mark { block-size: clamp(20px, 4.21875cqw, 81px); } /* ── MIRROR EDIT 1 of 2: THE CHEVRON IS A DIFFERENT COMPONENT ON THIS SITE ── The room's copy sizes this box 125.34 x 113.4px, because ITS Logo10xTerminal crops the viewBox to the tight ink box `19 19 84 76` and the drawn chevron therefore fills the wrapper exactly. THIS SITE's src/components/Logo10xTerminal.vue is the original and keeps the SQUARE `0 0 110 110` viewBox, with the same ink inside it and `preserveAspectRatio="xMidYMid meet"`. Dropped into the room's box the same chevron would draw at 69% of the size, letterboxed and off-centre. So the wrapper is resized and re-anchored to put the same INK in the same place, and the arithmetic is exact rather than eyeballed: room scale 113.4px / 76 user units = 1.492105 px per unit square wrapper 110 units x 1.492105 = 164.13px, square 164.13 / 19.2 = 8.54852cqw ink inset in it (110 - 103) x 1.492105 = 10.4447px on its left (110 - 95) x 1.492105 = 22.3816px under it so the wrapper 3cqw - 10.4447px = 47.1553px = 2.45601cqw inline-start moves out to 3cqw - 22.3816px = 35.2184px = 1.83429cqw block-end (MIRROR EDIT 2, on `.slide__brandmark--term` below) Do NOT "simplify" this back to the room's two numbers, and do NOT change this site's component to the cropped viewBox - it is mounted on the marketing pages too, where the square box is what the watermark rules in logo-10x-terminal.css are built on. The floor moves with the cap for the same reason the room's two numbers move together: 28px of 113.4 is the same fraction as 40.53px of 164.13. */ .slide__brandmark .logo-10x-terminal { block-size: clamp(40.53px, 8.54852cqw, 164.13px); inline-size: clamp(40.53px, 8.54852cqw, 164.13px); } /* The title and the body paint ABOVE both marks. See the note above: a mark is positioned and they are not, so without this the chevron lands on top of a wide title's first word. */ .slide__title, .slide__body { position: relative; z-index: 1; } /* THE 10x MARK IS TOP-LEFT. `inline-end` IS the physical left in this dir="rtl" deck - the same axis `.tpl-mascot--corner-end` uses and documents. */ .slide__brandmark--mark { inset-block-start: 3cqw; inset-inline-end: 3cqw; } /* THE CHEVRON IS BOTTOM-RIGHT. `inline-start` is the physical RIGHT here, the same axis `.tpl-mascot--corner` uses - so this corner is SHARED with the 20 corner mascots of the session-1 deck, and the two clear each other by geometry rather than by luck. Both numbers are exact and neither depends on a font, a title length or a build step: mascot right 1920 - 7cqw - 3.2cqw bottom 1080 - 6cqw - 3.2cqw chevron left 1920 - 3cqw - 6.528cqw top 1080 - 3cqw - 5.90625cqw (`.tpl-mascot--corner` is absolute against `.slide__body`, which is the nearest positioned ancestor - the `position: relative` two rules up - so its insets stack on the slide's own 6cqw/7cqw display padding. Its own comment still says it positions against the slide; it does not.) That leaves 0.672cqw = 12.9px of horizontal and 0.29375cqw = 5.6px of vertical clearance, a diagonal step rather than an overlap, and the drawn ink inside each box is inset much further than that - measured on orders 29, 41, 73, 103 and 104, which read as two pieces of quiet furniture with air between them. SHRINK EITHER GAP AND THEY TOUCH. If the chevron ever grows, or its inset ever drops below 3cqw, move the mascot rather than trusting these millimetres. THE ONE COLLISION THAT WAS NOT IN THIS FILE IS FIXED (2026-09-06). `.cl-display__badge` (app.css) is the projector's head count, and it used to be `position: fixed` at `inset-inline-start: var(--space-lg)` - the VIEWPORT's bottom right, which is this corner. It cleared the chevron by 3.6px at exactly 1920x1080 and overlapped it everywhere else, because the canvas scales and a fixed pill does not: measured 94x11px of overlap at 1440x810 and 84x16px at 1280x720. The badge is on `inset-inline-end` now - the bottom LEFT, the one corner the deck does not use - so this corner is the chevron's and the mascot's alone. If the badge ever moves back, this is the note that says why it must not. */ /* ── MIRROR EDIT 2 of 2. The room writes `3cqw` on both. Read MIRROR EDIT 1 above: this site's chevron sits inside a square wrapper with 10.4447px of transparent margin on its left and 22.3816px under it, so the wrapper is pulled out by exactly that much and the drawn ink lands on the room's own 3cqw / 3cqw corner. The clearance arithmetic in the comment above is about the INK and still holds to the pixel; the invisible wrapper box does now overlap `.tpl-mascot--corner`, which costs nothing - it paints nothing and carries `pointer-events: none`. */ .slide__brandmark--term { inset-block-end: 1.83429cqw; inset-inline-start: 2.45601cqw; } /* A 9:16 phone card has no corner to spare - and it could not size these anyway: `.slide--phone` has no container ancestor, so `cqw` there resolves against nothing this deck controls, and a 313px-wide mark is wider than the whole card. Matches both marks through the shared base class. */ .slide--phone .slide__brandmark { display: none; } /* ── Build steps ───────────────────────────────── */ /* A slide body marks its build parts with `data-step="N"`; the renderer publishes the live step as `slide--step-N` on the root and these rules hide whatever is still ahead of it. THE DEFAULT IS VISIBLE AND THE RULES HIDE, not the other way round. If a step class is ever missing the slide shows too much, which a presenter can talk over; the inverse would paint a blank slide on a projector, which they cannot. Every rule below is exactly `.slide--step-N [data-step="M"]` - one class plus one attribute, identical specificity throughout. Do not add a rule at a different weight: an uneven cascade here hides a line with no error and no symptom until the moment it should have appeared. */ .slide [data-step] { transition: opacity 0.25s ease, transform 0.25s ease; } .slide--step-0 [data-step='1'], .slide--step-0 [data-step='2'], .slide--step-0 [data-step='3'], .slide--step-0 [data-step='4'], .slide--step-0 [data-step='5'], .slide--step-0 [data-step='6'], .slide--step-0 [data-step='7'], .slide--step-1 [data-step='2'], .slide--step-1 [data-step='3'], .slide--step-1 [data-step='4'], .slide--step-1 [data-step='5'], .slide--step-1 [data-step='6'], .slide--step-1 [data-step='7'], .slide--step-2 [data-step='3'], .slide--step-2 [data-step='4'], .slide--step-2 [data-step='5'], .slide--step-2 [data-step='6'], .slide--step-2 [data-step='7'], .slide--step-3 [data-step='4'], .slide--step-3 [data-step='5'], .slide--step-3 [data-step='6'], .slide--step-3 [data-step='7'], .slide--step-4 [data-step='5'], .slide--step-4 [data-step='6'], .slide--step-4 [data-step='7'], .slide--step-5 [data-step='6'], .slide--step-5 [data-step='7'], .slide--step-6 [data-step='7'] { opacity: 0; transform: translateY(0.6cqw); /* Not display:none - the reveal must not reflow the lines already on screen. */ pointer-events: none; } /* ── Breakpoints: 1024 tablet, 767 mobile ──────── Only the phone surface has any: the display surface is inside a container query and must never branch on the viewport. The room's copy also tunes `.cl-cloud__word--r4/r5` here; both are left out with the rest of the `.cl-*` blocks. */ @media (max-width: 767px) { .slide--phone { padding: var(--space-md); } }