/* ai.ravivasavan.com/ai-up-close/slides: themed like Ravi's deck at ai.ravivasavan.com/deck/ (Labil Grotesk 400, one orange accent, hairline separators, day / night / system / circadian via data-theme on , same tokens as /ai-up-close/css/house.css and the deck's draft.css). Wide windows: slides are drawn on a 1920x1080 canvas scaled to fit; the gutters take the page colour. Phones and portrait iPads (html.portrait, set by deck.js): fluid at the window size, see the end. Slides swap with a hard cut (never two on screen); only the incoming content and the beats move. */ :root { --dur: 420ms; --ease-out: cubic-bezier(.16, 1, .3, 1); color-scheme: light; /* type ramp and line weights on the 1920 canvas (visual language 2.1, 8) */ --t-main: 104px; --t-hero: 200px; --t-lead: 56px; --t-body: 40px; --t-label: 28px; --t-meta: 22px; --hair: 2px; --line: 4px; --line-bold: 6px; } /* UA parts (scrollbars) follow data-theme, as in wafdc.css. Circadian sets it inline (/ai-up-close/js/circadian.js). */ [data-theme="night"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { [data-theme="system"] { color-scheme: dark; } } html, body { height: 100%; overflow: hidden; background: var(--bg); } body { margin: 0; color: var(--fg); transition: background-color 240ms ease, color 240ms ease; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } #viewport { position: fixed; inset: 0; background: var(--bg); touch-action: pinch-zoom; transition: background-color 240ms ease; } #stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; background: var(--bg); color: var(--fg); } .slide { position: absolute; inset: 0; padding: 150px 160px 88px; box-sizing: border-box; display: grid; grid-template-rows: auto auto 1fr; row-gap: 0; background: var(--bg); color: var(--fg); visibility: hidden; opacity: 0; } .slide.is-current { visibility: visible; opacity: 1; } .slide.is-current .visual { animation: slide-in var(--dur) var(--ease-out) both; } @keyframes slide-in { from { opacity: 0; transform: translateY(12px); } } .slide.dark { background: var(--fg); color: var(--bg); } /* deck kicker: small caps-style label above the heading, dim. Kept (empty) on slides without a part, so every heading starts at the same height */ .kicker { grid-row: 1; font-size: 21px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, currentColor 55%, transparent); margin: 0 0 18px; } .kicker:empty::before { content: "\00a0"; } .line { grid-row: 2; font-size: 104px; line-height: 1.05; font-weight: 400; margin: 0 0 40px; max-width: 1600px; text-wrap: balance; } .line em { color: var(--orange); } .visual { grid-row: 3; position: relative; min-height: 0; } .small { font-size: 26px; line-height: 1.35; color: color-mix(in srgb, currentColor 72%, transparent); } /* a short, dim source line inside the content area (never in the bottom margin) */ .source { position: absolute; left: 0; right: 0; bottom: 0; max-width: 60ch; margin: 0; font-size: 22px; line-height: 1.35; color: color-mix(in srgb, currentColor 66%, transparent); } svg { overflow: visible; } /* builds: one beat at a time */ [data-b] { opacity: 0; transform: translateY(12px); transition: opacity var(--dur) ease, transform var(--dur) var(--ease-out); } [data-b].on { opacity: 1; transform: none; } .pop[data-b] { transform: scale(.92); } .pop[data-b].on { transform: scale(1); transition: opacity var(--dur) ease, transform var(--dur) var(--ease-out); } .fade[data-b] { transform: none; } /* 1 · title (the cover): the title's own full stop, circled, then magnified into its real greyscale pixel values. cover.js measures the words, places the date and draws the lens; the page colours are the theme's, so it works in day, night, system and circadian. */ .s-title { padding: 0; display: block; } .s-title .line { position: absolute; left: 160px; top: 466px; margin: 0; max-width: none; font-size: 184px; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; } .s-title .stop { margin-left: .04em; } /* left and top are set from the measured ink of the title (its first letter, its "p" descender) */ .s-title .sub { position: absolute; left: 165px; top: 680px; font-size: var(--t-body); line-height: 1.2; white-space: nowrap; color: color-mix(in srgb, currentColor 60%, transparent); } .s-title :is(.zoom, .zoom-top) { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } /* one accent: the callout (ring, tangents, rim), all one weight. The pixels are the page's own ink */ .zoom-top .ring, .zoom .rim, .zoom .tan { fill: none; stroke: var(--orange); stroke-width: var(--line); stroke-linecap: round; } .zoom .disc { fill: var(--bg); } .zoom .px { fill: currentColor; } .zoom .gridline { fill: none; stroke: var(--row-separator); stroke-width: var(--hair); } .zoom .n { font-family: inherit; text-anchor: middle; dominant-baseline: central; font-variant-numeric: tabular-nums; fill: currentColor; fill-opacity: .6; } .zoom .n.ink { fill: var(--bg); fill-opacity: .85; } .zoom .n.mid { fill-opacity: 1; } /* ── shared drawing (visual language 2.6): k = stroke, f = fill; 1 ink, 2 ink-2, 3 ink-3, t tint, a accent, p page ── */ .k1 { stroke: var(--fg); } .k2 { stroke: color-mix(in srgb, var(--fg) 40%, transparent); } .k3 { stroke: color-mix(in srgb, var(--fg) 14%, transparent); } .ka { stroke: var(--orange); } .f1 { fill: var(--fg); } .f2 { fill: color-mix(in srgb, var(--fg) 40%, transparent); } .f3 { fill: color-mix(in srgb, var(--fg) 14%, transparent); } .ft { fill: color-mix(in srgb, var(--fg) 6%, transparent); } .fa { fill: var(--orange); } .fp { fill: var(--bg); } /* the model mark: the one symbol for "the AI" */ .mark { overflow: visible; } .mark :is(.mk-l, .mk-l2) { fill: none; stroke: color-mix(in srgb, var(--fg) 40%, transparent); stroke-linecap: round; } .mark .mk-d { fill: var(--fg); } /* a change of look with no motion: arriving by ←, a jump, an overview card (deck.js snap) */ .snap, .snap * { transition: none !important; } /* portrait: a fixed-size design scaled to fit the visual box (deck.js fitAll) */ .fit { position: absolute; left: 0; top: 0; transform-origin: 0 0; } /* one-shot demos (each one's resting look is the finished frame) */ @keyframes fx-in { from { opacity: 0; } } @keyframes fx-off { from { opacity: 1; } to { opacity: 0; } } @keyframes fx-msg { from { opacity: 0; transform: translateY(10px); } } @keyframes fx-gone { to { visibility: hidden; } } /* hidden from the moment it starts (a 1ms fx-gone can end at progress .99999, which still reads visible) */ @keyframes fx-hide { from, to { visibility: hidden; } } @keyframes fx-vis { from, to { visibility: visible; } } @keyframes think { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } } /* the deck's dashed note; warm = the point (orange edge) */ .callout { font-size: var(--t-label); line-height: 1.3; padding: 14px 22px; border: 2px dashed color-mix(in srgb, var(--fg) 40%, transparent); border-radius: 16px; background: var(--bg); color: var(--fg); } .callout.warm { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 8%, var(--bg)); } /* a tag on a photo or object: neutral pill cut out of the picture; .pt is the point (orange) */ .ptag { position: absolute; top: 12px; left: 12px; font-size: var(--t-label); line-height: 1.25; padding: .12em .6em .16em; border-radius: 999px; background: var(--bg); color: var(--fg); box-shadow: inset 0 0 0 2px var(--row-separator), 0 0 0 6px var(--bg); } .ptag.pt { background: var(--orange); color: var(--night); box-shadow: 0 0 0 6px var(--bg); } /* 2 · today: one path; parts are key dots with their glyphs, breaks small dots with a cup */ svg.tday { display: block; width: 100%; height: 100%; } .tday .seg { stroke: color-mix(in srgb, var(--fg) 14%, transparent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; } .tday .seg[data-b] { opacity: 0; transform: none; transition: stroke-dashoffset var(--dl, 700ms) var(--ease-out), opacity 0s; } .tday .seg[data-b].on { opacity: 1; stroke-dashoffset: 0; } .tday .node[data-b] { opacity: 1; transform: none; transition: none; } .tday .node :is(.gl, .dot, text) { opacity: 0; transition: opacity var(--dur) ease, transform var(--dur) var(--ease-out), fill 240ms ease; } .tday .node :is(.gl, text) { transform: translateY(12px); } .tday .node .dot { transform: scale(.5); transform-box: fill-box; transform-origin: center; } .tday .node.on :is(.gl, .dot, text) { opacity: 1; transform: none; } /* --dl: how long the segment into this node takes to draw (deck.js scales it to the segment's length) */ .tday .node.on .dot { transition-delay: calc(var(--dl, 700ms) - 140ms), calc(var(--dl, 700ms) - 140ms), 0ms; } .tday .node.on .gl { transition-delay: calc(var(--dl, 700ms) - 20ms); } .tday .node.on .lab { transition-delay: calc(var(--dl, 700ms) + 60ms), calc(var(--dl, 700ms) + 60ms), 0ms; } .tday .node.on .lab2 { transition-delay: calc(var(--dl, 700ms) + 140ms), calc(var(--dl, 700ms) + 140ms), 0ms; } .tday .gl { color: var(--fg); } /* Today's live glyphs (LIFE in deck.js): the lens's pixels and the break's water are the glyph's own ink */ .lglyph .lpx { fill: currentColor; stroke: none; } .glass .water { fill-opacity: .7; } .tday .part .dot { fill: var(--fg); } .tday .part.hot .dot { fill: var(--orange); } .tday .brk .dot { fill: color-mix(in srgb, var(--fg) 40%, transparent); } .tday .brk .gl { color: color-mix(in srgb, var(--fg) 40%, transparent); } .tday .lab { font-size: var(--t-body); fill: var(--fg); } .tday .lab2 { font-size: var(--t-label); fill: color-mix(in srgb, var(--fg) 60%, transparent); } /* 3 · use: four phones on 3+3+3+3 columns; the acted-on thing in each demo turns orange */ .use { display: grid; grid-template-columns: repeat(4, 382px); column-gap: 24px; align-items: start; height: 100%; } .use .dev { padding-top: 28px; } .use .phone { position: relative; width: 280px; height: 460px; margin-left: 51px; box-sizing: border-box; border: 4px solid var(--fg); border-radius: 32px; background: var(--bg); overflow: hidden; } .use .txt { margin: 16px 0 0 51px; max-width: 331px; } .use .lbl { font-size: var(--t-body); line-height: 1.25; } .use .how { font-size: var(--t-label); line-height: 1.3; margin-top: 4px; text-wrap: balance; color: color-mix(in srgb, var(--fg) 60%, transparent); } .use .scr { position: absolute; inset: 0; } .use .fig { fill: color-mix(in srgb, var(--fg) 14%, transparent); } /* autocorrect: "teh" is underlined, then becomes "the" */ .ac .blk { position: absolute; height: 52px; border-radius: 12px; background: color-mix(in srgb, var(--fg) 6%, transparent); } .ac .b1 { left: 18px; top: 40px; width: 160px; } .ac .b2 { right: 18px; top: 104px; width: 124px; background: color-mix(in srgb, var(--fg) 14%, transparent); } .ac .field { position: absolute; left: 14px; right: 14px; top: 214px; height: 72px; padding: 0 18px; box-sizing: border-box; border-radius: 12px; background: color-mix(in srgb, var(--fg) 6%, transparent); box-shadow: inset 0 0 0 2px var(--row-separator); font-size: var(--t-label); line-height: 72px; white-space: nowrap; } .ac .swap { display: inline-grid; } .ac .swap > span { grid-area: 1 / 1; } .ac .a { position: relative; opacity: 0; } .ac .a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 16px; height: 6px; border-radius: 3px; background: var(--orange); transform: scaleX(0); transform-origin: left; } .ac .b { transition: color 240ms ease; } .dev.hot .ac .b { color: var(--orange); } .ac .cur { display: none; width: 3px; height: 34px; margin-left: 3px; background: var(--fg); vertical-align: -8px; } .ac .keys { position: absolute; left: 14px; right: 14px; bottom: 18px; display: grid; gap: 8px; } .ac .keys div { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 5px; padding: 0 calc((10 - var(--n)) * 12px); } .ac .keys i { height: 40px; border-radius: 8px; background: color-mix(in srgb, var(--fg) 8%, transparent); } .dev.play .ac .cur { display: inline-block; animation: cur 900ms steps(1) 200ms both; } @keyframes cur { 0% { opacity: 1; } 30% { opacity: 0; } 60% { opacity: 1; } 100% { opacity: 0; } } .dev.play .ac .a { animation: fx-off 240ms ease 1100ms both; } .dev.play .ac .a::after { animation: ul 240ms var(--ease-out) 700ms both; } @keyframes ul { from { transform: scaleX(0); } to { transform: none; } } .dev.play .ac .b { animation: fx-in 240ms ease 1100ms both; } /* your feed: watched to the end (orange), then the next video slides up */ .feed .card { position: absolute; inset: 0; background: color-mix(in srgb, var(--fg) 6%, transparent); overflow: hidden; } .feed .fig { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); } .feed .rail { position: absolute; right: 16px; bottom: 96px; display: grid; gap: 22px; color: color-mix(in srgb, var(--fg) 60%, transparent); } .feed .rail svg { display: block; } .feed .meta { position: absolute; left: 18px; bottom: 46px; display: grid; grid-template-columns: 28px 96px; column-gap: 10px; row-gap: 10px; align-items: center; } .feed .meta i { display: block; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--fg) 14%, transparent); } .feed .meta .av { width: 28px; height: 28px; border-radius: 50%; } .feed .meta .nm { width: 96px; height: 10px; background: color-mix(in srgb, var(--fg) 40%, transparent); } .feed .meta .ln { grid-column: 1 / -1; width: 168px; } .feed .meta .l2 { width: 120px; } .feed .trk { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: color-mix(in srgb, var(--fg) 14%, transparent); overflow: hidden; } .feed .trk i { display: block; height: 100%; border-radius: 0 3px 3px 0; background: var(--fg); transform-origin: left; transition: background-color 240ms ease; } .feed .c1 { transform: translateY(-110%); visibility: hidden; } .feed .c1 .trk i { background: var(--orange); } .feed .c2 .trk i { transform: scaleX(.12); } .dev.hot .feed .c2 .trk i { background: var(--orange); } .dev.play .feed .c1 { animation: feed-out 420ms var(--ease-out) 1400ms both; } .dev.play .feed .c1 .trk i { animation: bar 1200ms var(--ease-out) 200ms both; } .dev.play .feed .c2 { animation: feed-in 420ms var(--ease-out) 1400ms both; } @keyframes feed-out { from { transform: none; visibility: visible; } to { transform: translateY(-110%); visibility: hidden; } } @keyframes feed-in { from { transform: translateY(110%); } to { transform: none; } } @keyframes bar { from { transform: scaleX(0); } to { transform: none; } } /* face unlock: dots land on the face row by row, then the lock opens */ .face svg { position: absolute; inset: 0; } .face .fd { fill: color-mix(in srgb, var(--fg) 40%, transparent); } .face .lk1 { opacity: 0; color: var(--fg); } .face .lk2 { color: var(--fg); transition: color 240ms ease; } .dev.hot .face .lk2 { color: var(--orange); } .dev.play .face .fd { animation: fx-in 240ms ease both; animation-delay: calc(200ms + var(--r) * 80ms); } .dev.play .face .lk1 { animation: fx-off 240ms ease 1600ms both; } .dev.play .face .lk2 { animation: fx-in 240ms ease 1600ms both; } /* captions: a real caption bar (night, white words) in any theme, one word at a time */ .cap .vid { position: absolute; left: 0; right: 0; top: 56px; height: 180px; background: color-mix(in srgb, var(--fg) 6%, transparent); overflow: hidden; } .cap .vid .fig { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); } .cap .cbar { position: absolute; left: 10px; right: 10px; bottom: 12px; text-align: center; font-size: var(--t-meta); line-height: 1.6; white-space: nowrap; } .cap .ctl { position: absolute; left: 16px; right: 16px; top: 250px; display: flex; align-items: center; gap: 12px; color: color-mix(in srgb, var(--fg) 60%, transparent); font-size: 16px; font-variant-numeric: tabular-nums; } .cap .ctl svg { flex: none; } .cap .ctrk { flex: 1; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--fg) 14%, transparent); overflow: hidden; } .cap .ctrk i { display: block; width: 34%; height: 100%; border-radius: 3px; background: var(--fg); } .dev.play .cap .ctrk i { animation: cap-run 2400ms linear 200ms both; } @keyframes cap-run { from { width: 22%; } to { width: 34%; } } .cap .vpage { position: absolute; left: 16px; right: 16px; top: 296px; display: grid; gap: 10px; } .cap .vpage i { display: block; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--fg) 14%, transparent); } .cap .vpage > .ln { width: 200px; background: color-mix(in srgb, var(--fg) 40%, transparent); } .cap .vpage > .l2 { width: 140px; } .cap .nx { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; margin-top: 8px; } .cap .nx .th { height: 54px; border-radius: 8px; background: color-mix(in srgb, var(--fg) 6%, transparent); } .cap .nx .ln { margin-top: 6px; } /* each word brings its own piece of the bar (live captions grow word by word): the pieces overlap 12px, so they join into one bar with r8 ends; the space after a word sits inside its piece */ .cap .cw { padding: 5px 6px; margin: 0 -6px; border-radius: 8px; background: var(--night); color: var(--white); -webkit-box-decoration-break: clone; box-decoration-break: clone; } .cap .cw:first-child { padding-left: 12px; margin-left: 0; } .cap .cw:last-child { padding-right: 12px; margin-right: 0; } .dev.play .cap .cw { animation: fx-in 160ms ease both; animation-delay: calc(200ms + var(--k) * 260ms); } /* 4 · examples: photos with their answer, the model box, a new photo, its answer */ .ex { position: relative; width: 1600px; height: 648px; } .ex.fit { position: absolute; } .ex .exg { position: absolute; inset: 0; transform: translateX(var(--pan, 0px)); transition: transform 760ms cubic-bezier(.65, 0, .35, 1); } .s-examples.st-3 .ex .exg { transform: none; } .ex .pcs { position: absolute; inset: 0; transition: opacity var(--dur) ease; } .s-examples.st-3 .ex .pcs { opacity: .35; } .ex .pc, .ex .newc { position: absolute; border-radius: 24px; } .ex .pc { width: 160px; height: 160px; } .ex :is(.pc, .newc) img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .ex :is(.pc, .newc)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--row-separator); pointer-events: none; } /* tags sit bottom-left here, clear of the eye the lens opens */ .ex .ptag { top: auto; bottom: 12px; } .ex .lbl { position: absolute; font-size: var(--t-label); line-height: 1.3; white-space: nowrap; color: color-mix(in srgb, var(--fg) 60%, transparent); } .ex :is(.ex-ov, .ex-arrow, .ex-fly) { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; } .ex .lensg[data-b] { transform: none; transition: opacity 120ms ease; } .s-examples.st-2 .ex .lensg { opacity: 0; transition: opacity 120ms ease 200ms; } .s-examples.inset .ex .lensg { opacity: 1; } /* portrait: the lens opens over the box and the stack's label, so the label steps aside for b1 */ .ex :is(.pcs .lbl, .mlbl) { transition: opacity 240ms ease; } .portrait .s-examples.st-1:not(.st-2) .ex .pcs .lbl { opacity: 0; } /* the box's label would peek out under the lens, so it steps aside with the box for b1 */ .s-examples.st-1:not(.st-2) .ex .mlbl { opacity: 0; } /* the cover's callout again, at the cover's one weight */ .lensg :is(.tan, .ring, .rim) { fill: none; stroke: var(--orange); stroke-width: var(--line); stroke-linecap: round; } .lensg .ring { stroke-dasharray: 1 1; } .lensg .disc { fill: var(--bg); } .lensg .pn { font-size: 15px; text-anchor: middle; dominant-baseline: central; font-variant-numeric: tabular-nums; fill: #0d1b1e; } .lensg .pn.lt { fill: #fff5f5; } .lensg .gridline { fill: none; stroke: #0d1b1e; stroke-opacity: .14; stroke-width: 2; } .ex .fly { fill: var(--fg); opacity: 0; } .ex .mbox { position: absolute; box-sizing: border-box; border: 4px solid var(--fg); border-radius: 32px; background: var(--bg); display: grid; place-items: center; } .ex .mark.learn .mk-l { stroke: color-mix(in srgb, var(--fg) 14%, transparent); } .ex .mark.learn .mk-d { fill: color-mix(in srgb, var(--fg) 14%, transparent); } .ex .mark.learn .mk-l2 { opacity: 0; } .ex .mark.learn .mk-l2 line { stroke-dasharray: 1 1; stroke-dashoffset: 1; } .s-examples.st-2 .ex .mark.learn .mk-l2 { opacity: 1; transition: opacity 0s 1400ms; } .s-examples.st-2 .ex .mark.learn .mk-l2 line { stroke-dashoffset: 0; transition: stroke-dashoffset 600ms var(--ease-out) 1400ms; } .s-examples.st-2 .ex .mark.learn .mk-d { fill: var(--fg); transition: fill 600ms ease 1400ms; } /* the new photo and its label arrive in their own place as the row slides home; then the arrow, then the answer */ .ex .newc[data-b], .ex .newl[data-b] { transform: none; } .ex .newl { color: var(--fg); } .ex .ex-arrow[data-b] { transform: none; } .ex .ex-arrow path { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; } .ex .out { position: absolute; font-size: var(--t-hero); line-height: 1; color: var(--orange); } .ex .out[data-b] { transform: none; } .s-examples.play .ex :is(.newc, .newl) { animation: fx-msg 420ms var(--ease-out) 520ms both; } .s-examples.play .ex .ex-arrow { animation: fx-in 300ms ease 1000ms both; } .s-examples.play .ex .out { animation: ex-pop 420ms var(--ease-out) 1200ms both; } @keyframes ex-pop { from { opacity: 0; transform: scale(.96); } } /* 5 · patterns: six cats as dots, scattered; each six merge into one; then joined, ears in orange */ .pat { display: block; width: 100%; height: 100%; } .pat .nz { fill: color-mix(in srgb, var(--fg) 36%, transparent); transition: fill 700ms ease; } .s-patterns.st-1 .pat .nz { fill: color-mix(in srgb, var(--fg) 8%, transparent); } .pat :is(.grps, .edges)[data-b] { opacity: 1; transform: none; transition: none; } .pat .sd { fill: color-mix(in srgb, var(--fg) 36%, transparent); transform: translate(var(--dx), var(--dy)) scale(.714); transform-box: fill-box; transform-origin: center; transition: transform 1400ms var(--ease-out) calc(var(--k) * 40ms), fill 700ms ease calc(var(--k) * 40ms + 600ms); } .s-patterns.st-1 .pat .sd { transform: none; fill: var(--fg); } .pat .edge { fill: none; stroke: color-mix(in srgb, var(--fg) 40%, transparent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; } .pat .edge.ear { stroke: var(--orange); stroke-width: 6; } .s-patterns.st-2 .pat .edge { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 1200ms var(--ease-out) var(--dl), opacity 0s var(--dl); } .pat .pcall[data-b] { transform: none; } .pat .pcall[data-b].on { transition-delay: 1500ms; } .pat .pcall rect { fill: color-mix(in srgb, var(--orange) 8%, var(--bg)); stroke: var(--orange); stroke-width: 2; stroke-dasharray: 6 6; } .pat .pcall text { font-size: var(--t-label); fill: var(--fg); } /* the leader to the ear it names, in the house trail (Know, Check): 4px ink-2 dots */ .pat .plead { fill: none; stroke: color-mix(in srgb, var(--fg) 40%, transparent); stroke-width: var(--line); stroke-linecap: round; stroke-dasharray: 2 12; } .pcap { position: absolute; left: 0; bottom: 0; margin: 0; font-size: var(--t-label); line-height: 1.3; color: color-mix(in srgb, var(--fg) 60%, transparent); } /* 6 · predict: the prompt, then four rows of measured chances in a fixed order */ .pd { position: relative; height: 100%; } .pd .pline { font-size: var(--t-lead); line-height: 1.25; white-space: nowrap; } /* the context grows in front of the prompt, so the prompt slides right to make room; clip-path (not overflow) keeps the line's baseline */ .pd .ctx[data-b] { display: inline-block; width: 0; clip-path: inset(-.4em 0 -.4em 0); transform: none; transition: width 760ms var(--ease-out), opacity 400ms ease; } .pd .ctx[data-b].on { width: var(--cw, auto); transition: width 760ms var(--ease-out), opacity 400ms ease 260ms; } .pd .ci { display: inline-block; padding-right: .3em; } /* the blank is as wide as the word that fills it, so the line hugs it */ .pd .blank { display: inline-block; line-height: 1.1; border-bottom: 6px solid color-mix(in srgb, var(--fg) 40%, transparent); transition: border-color 240ms ease; } .s-predict.st-3 .pd .blank { border-bottom-color: var(--orange); } .pd .blank .w { color: var(--fg); } .pd .blank .w[data-b] { display: inline-block; transform: none; transition: opacity 400ms ease; } .pd .prows { margin-top: 24px; } .pd .prow { display: grid; grid-template-columns: 320px 1000px 1fr; column-gap: 24px; align-items: center; height: 96px; } .pd .lb { font-size: var(--t-body); line-height: 1.1; } .pd .trk { height: 28px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 6%, transparent); overflow: hidden; } .pd .fill { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--fg); transition: width 1400ms var(--ease-out) calc(var(--i) * 100ms); } .pd .rest .fill { background: color-mix(in srgb, var(--fg) 14%, transparent); } .s-predict.st-1 .pd .fill { width: calc(var(--b) * 1%); } .s-predict.st-2 .pd .fill { width: calc(var(--a) * 1%); transition: width 1200ms var(--ease-out) calc(420ms + var(--i) * 60ms), background-color 240ms ease 420ms; } .s-predict.st-2 .pd .pick .fill { background: var(--orange); } .pd .pc { justify-self: end; padding: 0 .35em; border-radius: 999px; font-size: var(--t-body); text-align: right; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--fg) 60%, transparent); transition: opacity var(--dur) ease, color 240ms ease 420ms, background-color 240ms ease 420ms; } .pd .pc[data-b] { transform: none; } /* orange text on the day page is 2.4:1, so the picked chance is an orange pill with night words (6.8:1) */ .s-predict.st-2 .pd .pick .pc { background: var(--orange); color: var(--night); } .pd .pbefore { display: none; } .print .pd .pbefore { display: block; } .print .pd .source:not(.pbefore) { bottom: 32px; } /* chat (Word; the benchmark's grammar at canvas scale): the person on the right in orange with night words, the AI on the left in the tint with the model mark; avatars on the last bubble of a run */ .thread { position: relative; height: 100%; display: flex; flex-direction: column; gap: 28px; } .msg { position: relative; display: flex; align-items: flex-end; gap: 16px; } .msg.me { justify-content: flex-end; } .msg p { margin: 0; max-width: 1150px; font-size: var(--t-lead); line-height: 1.25; padding: .55em .8em; border-radius: .75em; box-sizing: border-box; } .msg.me p { background: var(--orange); color: var(--night); border-bottom-right-radius: .24em; } .thread .msg p { text-wrap: pretty; } .msg:is(.ai, .them) p { background: color-mix(in srgb, var(--fg) 7%, transparent); border-bottom-left-radius: .24em; } .avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--fg) 7%, transparent); color: color-mix(in srgb, var(--fg) 40%, transparent); } .avatar.ini { font-size: 22px; line-height: 1; letter-spacing: .02em; color: color-mix(in srgb, var(--fg) 60%, transparent); } .typing { position: absolute; left: 80px; top: 0; display: none; gap: 12px; align-items: center; padding: 26px 30px; border-radius: 42px; border-bottom-left-radius: 13px; background: color-mix(in srgb, var(--fg) 7%, transparent); } .typing i { width: 14px; height: 14px; border-radius: 50%; background: color-mix(in srgb, var(--fg) 55%, transparent); animation: think 1.1s ease-in-out infinite; } .typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; } /* 7 · word: dots for 900ms, then the words one by one with the orange caret after the newest */ .rep .wd { position: relative; } .rep .wd::after { content: ""; position: absolute; left: 100%; top: .12em; bottom: .08em; width: 4px; margin-left: 6px; background: var(--orange); visibility: hidden; } .s-word.play .msg.ai .typing { display: flex; animation: fx-gone 1ms linear 900ms forwards; } .s-word.play .msg.ai :is(p, .avatar) { animation: fx-msg 320ms var(--ease-out) 900ms both; } .s-word.play .rep .wd { animation: fx-in 160ms ease var(--d) both; } .s-word.play .rep .wd::after { animation: fx-vis var(--l) linear var(--d); } .rep .wd.at { background: linear-gradient(var(--orange), var(--orange)) 0 100% / 0 6px no-repeat; transition: background-size 240ms ease; } .s-word.st-2 .rep .wd.at { background-size: 100% 6px; } /* b2: the chip is the one orange point, so the asker's bubble settles to ink-3 (fg 14%, a step darker than the AI's 7% tint): palette tokens only, so it stays neutral in day, night and circadian */ .s-word .msg.me p { transition: background-color 240ms ease, color 240ms ease; } .s-word.st-2 .msg.me p { background: color-mix(in srgb, var(--fg) 14%, transparent); color: var(--fg); } .picks { position: absolute; display: flex; align-items: center; gap: 32px; } .picks[data-b] { transform: none; transition: none; } .chips { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .chip { display: inline-flex; gap: .45em; font-size: var(--t-body); line-height: 1.2; padding: .1em .6em .14em; border-radius: 999px; background: color-mix(in srgb, var(--fg) 7%, transparent); opacity: 0; transform: translateY(-16px); transition: opacity var(--dur) ease, transform var(--dur) var(--ease-out); transition-delay: calc(var(--i) * 80ms); } .chip .cp { font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--fg) 60%, transparent); } .chip.top { background: var(--orange); color: var(--night); } .chip.top .cp { color: color-mix(in srgb, var(--night) 75%, transparent); } .s-word.st-2 .chip { opacity: 1; transform: none; } .picks .callout { opacity: 0; transition: opacity var(--dur) ease 360ms; } .s-word.st-2 .picks .callout { opacity: 1; } /* a reply slot (deck.js typeIn): the typing dots hold the message's place, then it lands (msg-in) */ .slot { position: relative; } .slot > .wait { position: absolute; left: 0; top: 0; display: none; } .slot.play > .wait { display: flex; animation: fx-hide 1ms linear var(--w) forwards; } .slot.play > :not(.wait) { animation: fx-msg 320ms var(--ease-out) var(--w) both; } .dots { display: flex; align-items: center; gap: 12px; } .dots i { width: 14px; height: 14px; border-radius: 50%; background: color-mix(in srgb, var(--fg) 55%, transparent); animation: think 1.1s ease-in-out infinite; } .dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; } /* the waiting dots only loop on the slide on screen (a hidden slide's waiting dots stay still) */ .slide:not(.is-current) :is(.dots, .typing) i { animation: none; } .msg p.dots { height: 1.25em; box-sizing: content-box; } /* 8 · know: a search box (no brand), the AI answer card, then the stamp; then the ring, a trail and the post */ .kn { position: relative; width: 1600px; height: 100%; } .kcol { position: absolute; left: 0; top: 0; width: 1600px; display: flex; flex-direction: column; align-items: flex-start; gap: 40px; } .kcol .kq { width: 1046px; } .kcol .kslot { align-self: stretch; } .kq { display: flex; align-items: center; gap: 24px; height: 112px; padding: 0 44px 0 36px; box-sizing: border-box; border: 4px solid var(--fg); border-radius: 999px; font-size: var(--t-lead); line-height: 1.25; white-space: nowrap; } .kq .icon { flex: none; color: color-mix(in srgb, var(--fg) 40%, transparent); } .kans { display: flex; align-items: flex-start; gap: 24px; padding: 32px; border-radius: 32px; background: color-mix(in srgb, var(--fg) 6%, transparent); box-sizing: border-box; } .kans p { margin: 0; font-size: var(--t-lead); line-height: 1.25; } .kans .avatar { margin-top: 3px; } /* the ringed word gets a little room, so the ring clears its neighbours: knLayout draws the ring --ring-pad (in em) out from the word, so the margin is that plus a gap */ /* the ringed word only makes room for its ring when the ring comes (b3); knLayout measures it then */ .kans .wd.it { --ring-pad: .24em; } .s-know.st-3 .kans .wd.it { margin: 0 calc(var(--ring-pad) + 2px); } .kans.wait { align-items: center; } .kans .dots { height: 70px; } .kans[data-b] { transform: none; } .s-know:not(.st-1) .kslot > .wait { display: flex; } .kfix { margin: 0; padding-left: 120px; font-size: var(--t-body); line-height: 1.3; } /* the post sits under the answer, right, where the trail from the ringed word comes down; the stamp holds its place first */ .kright { position: absolute; left: 1082px; top: 396px; width: 518px; } /* the stamp: cold ink, -8deg, the deck's one impact ease; it gives way to the post on the next beat */ .kstamp { position: absolute; left: 0; right: 0; top: 64px; display: grid; justify-items: center; } .kstamp span { font-size: var(--t-main); line-height: 1; padding: .1em .36em .14em; color: var(--orange); border: 6px solid var(--orange); border-radius: 24px; transform: rotate(-8deg); } .kstamp[data-b] { transform: scale(1.6); } .kstamp[data-b].on { transform: none; transition: transform 260ms cubic-bezier(.5, 0, .75, 0), opacity 120ms ease; } .s-know.st-3 .kstamp { opacity: 0; transition: opacity 200ms ease; } .kpost { padding: 28px 32px 32px; border-radius: 24px; background: color-mix(in srgb, var(--fg) 6%, transparent); box-shadow: inset 0 0 0 2px var(--row-separator); } .kph { display: flex; align-items: center; gap: 16px; } .kph i { flex: none; width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, var(--fg) 14%, transparent); } .kph span { font-size: var(--t-label); line-height: 1.3; color: color-mix(in srgb, var(--fg) 60%, transparent); } .kpost p { margin: 20px 0 0; font-size: var(--t-body); line-height: 1.3; } /* (on .on itself: the engine applies .on one style pass before the st- classes) */ .kn :is(.kpost, .kfix)[data-b].on { transition-delay: 900ms; } .ktr { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } .kring { fill: none; stroke: var(--orange); stroke-width: var(--line); stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; } .s-know.st-3 .kring { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 480ms var(--ease-out) 200ms, opacity 0s 200ms; } .kt { fill: none; stroke: color-mix(in srgb, var(--fg) 40%, transparent); stroke-width: var(--line); stroke-linecap: round; stroke-dasharray: 2 12; opacity: 0; } .s-know.st-3 .kt { opacity: 1; } .km { fill: none; stroke: #fff; stroke-width: 16; stroke-dasharray: 1 1; stroke-dashoffset: 1; } .s-know.st-3 .km { stroke-dashoffset: 0; transition: stroke-dashoffset 700ms var(--ease-out) 560ms; } /* 9 · sounding: two lanes on 6 + 6 columns, the same bubble on both sides; tags on the last beat */ .duel { display: grid; grid-template-columns: 788px 788px; column-gap: 24px; align-items: start; } /* lane eyebrows: caps like the kicker, the rule a little below the words */ .lane .lh, .lnh { font-size: 21px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; padding-bottom: 14px; border-bottom: 2px solid var(--row-separator); color: color-mix(in srgb, var(--fg) 60%, transparent); } .lane .slot { margin-top: 80px; } .lane .msg p { position: relative; max-width: 708px; } .lane .msg[data-b] { transform: none; } .lane .ptag { top: -22px; left: 20px; } .lane .ptag[data-b] { transform: scale(.96); transition: opacity var(--dur) ease, transform var(--dur) var(--ease-out); } .lane .ptag[data-b].on { transform: none; } .lane.r .ptag[data-b].on { transition-delay: 80ms; } .lane.l .msg p { transition: color 400ms ease; } .s-sounding.st-3 .lane.l .msg:not(.wait) p { color: color-mix(in srgb, var(--fg) 55%, transparent); } /* 10 · shown: tracked hands (4px ink-2 bones, 14px ink landmarks), the template as rings, orange gaps */ .sh { position: relative; width: 1600px; height: 648px; } .sh.fit { position: absolute; } .sh > svg { position: absolute; left: 0; top: 0; overflow: visible; } .sh .hb line { stroke: color-mix(in srgb, var(--fg) 40%, transparent); stroke-width: var(--line); stroke-linecap: round; } .sh .hd circle { fill: var(--fg); } .sh .hr circle { fill: var(--bg); stroke: color-mix(in srgb, var(--fg) 40%, transparent); stroke-width: var(--line); } /* laid on the new hand, the template is a ghost: open rings, faint 2px bones */ .sh .tcopy .hr circle { fill: none; } .sh .tcopy .hb line { stroke: color-mix(in srgb, var(--fg) 14%, transparent); stroke-width: var(--hair); } .sh .lb { font-size: var(--t-label); fill: color-mix(in srgb, var(--fg) 60%, transparent); } .sh .shcap { transition: transform 1200ms var(--ease-out), opacity var(--dur) ease 1200ms; } .s-shown.st-1 .sh .shcap { transform: translateX(var(--dx)); opacity: 0; } .sh .tpl { opacity: 0; } .s-shown.st-1 .sh .tpl { opacity: 1; transition: opacity var(--dur) ease 1200ms; } .sh .lb-l { opacity: 0; } .s-shown.st-1 .sh .lb-t { opacity: 0; transition: opacity 240ms ease 1200ms; } .s-shown.st-1 .sh .lb-l { opacity: 1; transition: opacity 240ms ease 1440ms; } .sh .sharr { fill: none; stroke: color-mix(in srgb, var(--fg) 40%, transparent); stroke-width: var(--line); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; } .s-shown.st-2 .sh .sharr { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 600ms var(--ease-out), opacity 0s; } .sh .nh { opacity: 0; transform: translateY(12px); } .s-shown.st-2 .sh .nh { opacity: 1; transform: none; transition: opacity var(--dur) ease 300ms, transform var(--dur) var(--ease-out) 300ms; } .sh .tcopy { opacity: 0; } .s-shown.st-3 .sh .tcopy { opacity: 1; } .sh .gaps line { stroke: var(--orange); stroke-width: var(--line-bold); stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; } .s-shown.st-3 .sh .gaps line { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 400ms var(--ease-out) calc(900ms + var(--k) * 80ms), opacity 0s calc(900ms + var(--k) * 80ms); } .sh .shchip { position: absolute; left: auto; opacity: 0; transform: scale(.96); } .s-shown.st-3 .sh .shchip { opacity: 1; transform: none; transition: opacity var(--dur) ease 1500ms, transform var(--dur) var(--ease-out) 1500ms; } /* the PDF names both: what it was trained on above the template, what it learned under it */ .print .s-shown .sh .lb-t { opacity: 1; transform: translate(var(--lx), var(--ly)); } /* 11 · captions: a player with the clip's real waveform; the caption bar is night with white words in any theme */ .cplay { position: absolute; left: 0; top: 0; width: 1600px; height: 596px; box-sizing: border-box; border: 4px solid color-mix(in srgb, var(--fg) 40%, transparent); border-radius: 32px; background: color-mix(in srgb, var(--fg) 6%, transparent); } .cpmeta { position: absolute; left: 28px; top: 20px; font-size: var(--t-label); line-height: 1.3; color: color-mix(in srgb, var(--fg) 60%, transparent); } .cpwave { position: absolute; left: 36px; top: 80px; width: 1520px; height: 120px; overflow: visible; } .cpwave .bars line { stroke: color-mix(in srgb, var(--fg) 40%, transparent); stroke-width: 6; stroke-linecap: round; } .cpwave .phd { stroke: var(--orange); stroke-width: var(--line); stroke-linecap: round; transition: stroke 240ms ease; } .s-captions.st-2 .cpwave .phd { stroke: color-mix(in srgb, var(--fg) 40%, transparent); } .cpbar { position: absolute; left: 28px; right: 28px; top: 232px; height: 328px; box-sizing: border-box; display: flex; align-items: center; padding: 0 44px; border-radius: 12px; background: var(--night); color: var(--white); box-shadow: inset 0 0 0 2px var(--row-separator); } /* the bar's box is kept from arrival, but its fill only comes in with the first word (b1) */ .cpbar { transition: background-color 240ms ease 160ms; } .s-captions:not(.st-1) .cpbar { background: transparent; } .cpbar p { margin: 0; font-size: var(--t-lead); line-height: 1.7; } .cpbar .cpw { opacity: 0; } .s-captions.st-1 .cpbar .cpw { opacity: 1; } /* misheard (b2): an orange line strikes through the phrase and it dims; what was said (b3) opens right after it */ .cpbar .hd { background: linear-gradient(var(--orange), var(--orange)) 0 58% / 0 5px no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: color 240ms ease, background-size 520ms var(--ease-out); } .s-captions.st-2 .cpbar .hd { color: color-mix(in srgb, var(--white) 40%, transparent); background-size: 100% 5px; transition-delay: calc(var(--i) * 140ms); } .cpbar .said { display: inline-block; width: 0; white-space: nowrap; clip-path: inset(-.5em 0 -.5em 0); opacity: 0; transition: width 680ms var(--ease-out), opacity 300ms ease; } .cpbar .said .sw { display: inline-block; padding-left: .3em; } .s-captions.st-3 .cpbar .said { width: var(--sw, auto); opacity: 1; transition: width 680ms var(--ease-out) calc(var(--i) * 160ms), opacity 300ms ease calc(240ms + var(--i) * 160ms); } /* 12 · you: eight everyday places, four by two on 3 + 3 + 3 + 3 columns */ .board { display: grid; grid-template-columns: repeat(4, 382px); column-gap: 24px; row-gap: 40px; padding-top: 176px; } .ytile { display: flex; align-items: center; gap: 20px; height: 160px; padding: 0 24px; box-sizing: border-box; border-radius: 32px; background: color-mix(in srgb, var(--fg) 6%, transparent); box-shadow: inset 0 0 0 2px var(--row-separator); font-size: var(--t-body); line-height: 1.2; } .ytile .icon { flex: none; } .ytile[data-b].on { transition-delay: calc(var(--i) * 80ms); } /* 13 · whose: twelve works (line frames) send their dots into the model box; the made picture; the lens on its ribbon */ .whw { position: relative; width: 100%; height: 100%; } .wh { position: absolute; left: 0; top: 0; } .wh > svg { position: absolute; left: 0; top: 0; overflow: visible; } .wh .wfr { fill: color-mix(in srgb, var(--fg) 6%, transparent); } .wh .wedge { fill: none; stroke: color-mix(in srgb, var(--fg) 40%, transparent); stroke-width: var(--line); } .wh .wgl { fill: none; stroke: color-mix(in srgb, var(--fg) 14%, transparent); stroke-width: var(--line); stroke-linecap: round; stroke-linejoin: round; } .wh .wblob { fill: color-mix(in srgb, var(--fg) 14%, transparent); } .wh .wsig { fill: none; stroke: color-mix(in srgb, var(--fg) 40%, transparent); stroke-width: var(--hair); stroke-linecap: round; stroke-linejoin: round; } .wh .rib { fill: color-mix(in srgb, var(--bg) 78%, transparent); stroke: var(--row-separator); stroke-width: var(--hair); } .wh .ribt { font-size: 20px; text-anchor: middle; fill: color-mix(in srgb, var(--fg) 60%, transparent); } .wh .rib.hot { fill: color-mix(in srgb, var(--orange) 85%, transparent); stroke: none; } .wh .ribt.hot { fill: var(--night); } /* magnified 3.2x, the lines in the lens still draw at 6px */ .whlens .lc :is(.wgl, .wedge) { stroke-width: 1.875; } .whlens .lc .rib { stroke: none; } .wh .whl { font-size: var(--t-label); fill: color-mix(in srgb, var(--fg) 60%, transparent); } .wh .whbox { fill: var(--bg); stroke: var(--fg); stroke-width: var(--line); } .wh .whf .wb { transition: opacity var(--dur) ease; } .s-whose.st-1 .wh .whf .wb { opacity: .5; transition-delay: 1400ms; } /* the three watermark ribbons stay at full strength, and on b3 their words go to ink, so the lens's "someone else's" points back to them */ .wh .whf .ribt { transition: fill 240ms ease 400ms; } .s-whose.st-3 .wh .whf .ribt { fill: var(--fg); } .wh .fly { fill: var(--fg); opacity: 0; } .wh .mark.learn .mk-l { stroke: color-mix(in srgb, var(--fg) 14%, transparent); } .wh .mark.learn .mk-d { fill: color-mix(in srgb, var(--fg) 14%, transparent); } .wh .mark.learn .mk-l2 { opacity: 0; } .wh .mark.learn .mk-l2 line { stroke-dasharray: 1 1; stroke-dashoffset: 1; } .s-whose.st-1 .wh .mark.learn .mk-l2 { opacity: 1; transition: opacity 0s 1500ms; } .s-whose.st-1 .wh .mark.learn .mk-l2 line { stroke-dashoffset: 0; transition: stroke-dashoffset 600ms var(--ease-out) 1500ms; } .s-whose.st-1 .wh .mark.learn .mk-d { fill: var(--fg); transition: fill 600ms ease 1500ms; } .wh .wharr { fill: none; stroke: color-mix(in srgb, var(--fg) 40%, transparent); stroke-width: var(--line); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; } .s-whose.st-2 .wh .wharr { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 600ms var(--ease-out), opacity 0s; } .wh .whpic { opacity: 0; transform: translateY(12px); } .s-whose.st-2 .wh .whpic { opacity: 1; transform: none; transition: opacity var(--dur) ease 450ms, transform var(--dur) var(--ease-out) 450ms; } .wh .whn { position: absolute; white-space: nowrap; opacity: 0; } .s-whose.st-3 .wh .whn { opacity: 1; transition: opacity 240ms ease 1540ms; } /* 14 · choose: switches on the left (5 columns), the draft they feed on the right */ .ch { position: relative; width: 1600px; height: 100%; } .chsw { position: absolute; left: 0; top: 0; width: 560px; } .chr { display: flex; align-items: center; justify-content: space-between; height: 128px; box-sizing: border-box; font-size: var(--t-body); line-height: 1.2; } .chr + .chr { border-top: 2px solid var(--row-separator); } .tgl { position: relative; flex: none; width: 120px; height: 66px; border-radius: 999px; background: var(--fg); outline: 4px solid transparent; outline-offset: 4px; transition: background-color 240ms ease 160ms, outline-color 240ms ease; } .tgl i { position: absolute; top: 6px; left: 60px; width: 54px; height: 54px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--row-separator); transition: left 240ms var(--ease-out) 160ms; } /* off: a tint track with an ink-2 edge, so it reads in every theme (in night the tint alone is 1.2:1) */ .s-choose.st-1 .r0 .tgl, .s-choose.st-2 .r1 .tgl, .s-choose.st-4 .r3 .tgl { background: color-mix(in srgb, var(--fg) 6%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--fg) 40%, transparent); } .s-choose.st-1 .r0 .tgl i, .s-choose.st-2 .r1 .tgl i, .s-choose.st-4 .r3 .tgl i { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--fg) 40%, transparent); } .s-choose.st-1 .r0 .tgl i, .s-choose.st-2 .r1 .tgl i, .s-choose.st-4 .r3 .tgl i { left: 6px; } /* one accent rule for every beat: the beat's subject wears the orange ring, and a past subject's ring goes (b1, b2, b4 flash and settle; Deaf holds its ring through b3 with the warm note, then lets go like the rest) */ .s-choose.st-3 .r2 .tgl { outline-color: var(--orange); } .s-choose.st-4 .r2 .tgl { outline-color: transparent; } .chc { position: absolute; left: 620px; top: 0; width: 980px; height: 512px; box-sizing: border-box; padding: 36px 44px; border: 4px solid var(--fg); border-radius: 32px; background: var(--bg); } .chd { margin: 0; font-size: var(--t-lead); line-height: 1.25; } .chd .pv { display: inline-block; border-radius: 12px; outline: 4px solid transparent; outline-offset: 4px; } .chd .pvc { position: relative; display: inline-block; vertical-align: top; white-space: pre; width: var(--wa, auto); clip-path: inset(-24px 0); transition: width 420ms var(--ease-out) 400ms; } .chd .u { background: linear-gradient(color-mix(in srgb, var(--fg) 40%, transparent), color-mix(in srgb, var(--fg) 40%, transparent)) 0 100% / 100% 2px no-repeat; } .chd .a, .chd .b { transition: opacity 320ms ease 400ms; } .chd .b { position: absolute; left: 0; top: 0; opacity: 0; } .s-choose.st-1 .p0 .pvc { width: 0; } /* the words fade as the gap starts to close, so no clipped letter butts up against the next word */ .s-choose.st-1 .p0 .a { opacity: 0; transition: opacity 160ms ease 400ms; } .s-choose.st-2 .p1 .pvc { width: var(--wb, auto); } .s-choose.st-2 .p1 .a { opacity: 0; } .s-choose.st-2 .p1 .b { opacity: 1; } .chbar { position: absolute; left: 44px; right: 44px; bottom: 36px; display: flex; align-items: flex-end; justify-content: space-between; } .chph { display: flex; align-items: center; gap: 20px; transform-origin: 80px 60px; transition: opacity var(--dur) ease 160ms, transform var(--dur) var(--ease-out) 160ms; } .chf { display: flex; align-items: center; justify-content: center; width: 160px; height: 120px; box-sizing: border-box; border: 4px solid color-mix(in srgb, var(--fg) 40%, transparent); border-radius: 24px; background: color-mix(in srgb, var(--fg) 6%, transparent); color: color-mix(in srgb, var(--fg) 40%, transparent); outline: 4px solid transparent; outline-offset: 4px; } .chf .icon:last-child { margin-left: -12px; } .chcap { font-size: var(--t-label); line-height: 1.3; color: color-mix(in srgb, var(--fg) 60%, transparent); } .s-choose.st-4 .chph { opacity: 0; transform: scale(.96); } .chsend { display: grid; place-items: center; width: 72px; height: 72px; box-sizing: border-box; border: 4px solid var(--fg); border-radius: 50%; } .ch .chn { position: absolute; left: 620px; top: 536px; white-space: nowrap; opacity: 0; transition: opacity var(--dur) ease 300ms, border-color 240ms ease, background-color 240ms ease; } .s-choose.st-3 .ch .chn { opacity: 1; } .s-choose.st-4 .ch .chn { border-color: color-mix(in srgb, var(--fg) 40%, transparent); background: var(--bg); } /* each beat's subject flashes an orange outline, then settles (only when the beat is played forward) */ @keyframes ch-flash { 0% { outline-color: transparent; } 12%, 55% { outline-color: var(--orange); } 100% { outline-color: transparent; } } @keyframes ch-flash2 { 0% { outline-color: transparent; } 25%, 50% { outline-color: var(--orange); } 100% { outline-color: transparent; } } .s-choose.play.st-1:not(.st-2) .r0 .tgl, .s-choose.play.st-2:not(.st-3) .r1 .tgl, .s-choose.play.st-4 .r3 .tgl, .s-choose.play.st-4 .chf { animation: ch-flash 1300ms ease both; } .s-choose.play.st-1:not(.st-2) .p0, .s-choose.play.st-2:not(.st-3) .p1 { animation: ch-flash2 700ms ease both; } /* 15 · ask: a three-bubble chat; the photo is in your first bubble */ .ak { gap: 32px; } /* the photo is its own attachment above the words (as messaging apps do), outside the orange bubble */ .akcol { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .akph { flex: none; display: flex; align-items: center; justify-content: center; width: 240px; height: 160px; box-sizing: border-box; border: 4px solid color-mix(in srgb, var(--fg) 40%, transparent); border-radius: 24px; background: var(--bg); color: color-mix(in srgb, var(--fg) 40%, transparent); transition: opacity var(--dur) ease; } .akph .icon:last-child { margin-left: -16px; } /* one line, so the attachment, the ask and both replies fit the visual box */ .ak .akt { max-width: none; white-space: nowrap; } .portrait .ak .akt { white-space: normal; } .s-ask.st-2 .akph { opacity: .35; } .ak .msg[data-b] { transform: translateY(10px); transition: opacity 320ms ease, transform 320ms var(--ease-out); } .ak .msg[data-b].on, .ak .slot .msg[data-b] { transform: none; } /* 16 · fake: an A/B duel on 6 + 6 columns, then the tags */ .fk { display: grid; grid-template-columns: 788px 788px; column-gap: 24px; row-gap: 32px; align-content: start; } .fkf { position: relative; margin: 0; width: 788px; height: 525px; border-radius: 24px; } .fkf img, .qzf img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .fkf::after, .qzf::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--row-separator); pointer-events: none; } .slide.is-current .fkf { animation: fx-msg var(--dur) var(--ease-out) calc(var(--i) * 120ms) both; } .fkf .fkt { top: 20px; left: 20px; font-size: var(--t-body); transition: opacity 240ms ease; } .fkf .fkt.t1 { opacity: 0; } .s-fake.st-1 .fkb .t0, .s-fake.st-2 .fka .t0 { opacity: 0; } .s-fake.st-1 .fkb .t1, .s-fake.st-2 .fka .t1 { opacity: 1; } .fkr { grid-column: 1 / -1; margin: 0; font-size: var(--t-body); line-height: 1.3; opacity: 0; transform: translateY(12px); transition: opacity var(--dur) ease, transform var(--dur) var(--ease-out); } .s-fake.st-2 .fkr { opacity: 1; transform: none; } /* 17 · quiz: the QR (columns 1 to 4) and the rules; after playing, one round and its giveaway */ .qz { position: relative; width: 1600px; height: 100%; } .qzl { position: absolute; left: 0; top: 0; width: 517px; } /* URLs (quiz, build, home): ink words carry the accent as a 6px orange underline (orange text is 2.4:1 on the day page) */ :is(.qzu, .bdu, .hmu) { text-decoration: underline var(--orange); text-decoration-thickness: .15em; text-underline-offset: .18em; text-decoration-skip-ink: none; } .qzu { margin-top: 24px; font-size: var(--t-body); line-height: 1.3; color: var(--fg); transition: color 240ms ease, text-decoration-color 240ms ease; } .s-quiz.st-1 .qzu { color: color-mix(in srgb, var(--fg) 40%, transparent); text-decoration-color: color-mix(in srgb, var(--fg) 14%, transparent); } .qzr { position: absolute; left: 676px; top: 0; width: 924px; display: grid; align-items: start; } .qzr > * { grid-area: 1 / 1; } .qzi { margin: 0; font-size: var(--t-lead); line-height: 1.25; text-wrap: balance; transition: opacity var(--dur) ease; } .qzd { opacity: 0; transition: opacity var(--dur) ease; } .s-quiz.st-1 .qzi { opacity: 0; } .s-quiz.st-1 .qzd { opacity: 1; } .qzp { display: grid; grid-template-columns: 450px 450px; column-gap: 24px; } .qzf { position: relative; margin: 0; width: 450px; height: 300px; border-radius: 24px; } .qzlook { margin: 32px 0 0; font-size: var(--t-body); line-height: 1.3; } /* 18 · check: a rail of the three ways (columns 1 to 5) beside one post (columns 6 to 12) */ .ck { position: relative; width: 1600px; height: 100%; } .ckrail { position: absolute; left: 0; top: 0; width: 653px; height: 100%; } /* the rail's skeleton is there from arrival (an ink-3 line and three empty key dots): it previews "three" without the answers; each beat fills a dot, adds its words and runs the ink-2 line on */ .cksk { position: absolute; left: 9px; top: 40px; width: 4px; height: 400px; border-radius: 2px; background: color-mix(in srgb, var(--fg) 14%, transparent); } .cksk.d { left: 0; top: calc(var(--i) * 200px + 29px); width: 22px; height: 22px; border-radius: 50%; } .ckline { position: absolute; left: 9px; top: 40px; width: 4px; height: 0; border-radius: 2px; background: color-mix(in srgb, var(--fg) 40%, transparent); transition: height 600ms var(--ease-out); } .s-check.st-2 .ckline { height: 200px; } .s-check.st-3 .ckline { height: 400px; } .ckw { position: absolute; left: 0; top: calc(var(--i) * 200px + 5px); width: 653px; display: flex; align-items: flex-start; color: color-mix(in srgb, var(--fg) 40%, transparent); opacity: 0; transform: translateY(12px); transition: opacity var(--dur) ease, transform var(--dur) var(--ease-out), color 240ms ease; } .ckdot { flex: none; width: 22px; height: 22px; margin-top: 24px; border-radius: 50%; background: var(--fg); transition: background-color 240ms ease; } .ckdot { font-style: normal; } .ckdot b { display: none; font-weight: 400; } .ckw .icon { flex: none; margin: 11px 0 0 26px; color: color-mix(in srgb, var(--fg) 40%, transparent); } .ckw span { margin-left: 24px; font-size: var(--t-lead); line-height: 1.25; text-wrap: balance; } .s-check.st-1 .w0, .s-check.st-2 .w1, .s-check.st-3 .w2 { opacity: 1; transform: none; } .s-check.st-1:not(.st-2) .w0, .s-check.st-2:not(.st-3) .w1, .s-check.st-3 .w2 { color: var(--fg); } .s-check.st-1:not(.st-2) .w0 .ckdot, .s-check.st-2:not(.st-3) .w1 .ckdot, .s-check.st-3 .w2 .ckdot { background: var(--orange); } .ckp { position: absolute; left: 676px; top: 0; width: 924px; height: 648px; } .ckpan { position: relative; } .ckpan.fit { position: absolute; } .ckpan > * { position: absolute; } .ckpan > svg { left: 0; top: 0; overflow: visible; pointer-events: none; } .ckpost { width: 604px; height: 548px; box-sizing: border-box; padding: 28px; border: 4px solid var(--fg); border-radius: 32px; background: var(--bg); transform-origin: 0 0; transition: transform 700ms var(--ease-out), border-width 700ms var(--ease-out); } .ckh { display: flex; align-items: center; gap: 16px; height: 56px; } .ckav { width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--fg) 14%, transparent); } .ckbar { width: 200px; height: 20px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 6%, transparent); } .ckcap { margin: 16px 0 0; font-size: var(--t-label); line-height: 1.3; white-space: nowrap; } .ckpost img { position: absolute; left: 28px; top: 152px; width: 540px; height: 360px; object-fit: cover; border-radius: 24px; } /* the lens closes first (300ms), then the post moves aside and the trail runs back from it */ .s-check.st-2 .ckpost { transform: translate(var(--sx), var(--sy)) scale(var(--sk)); border-width: calc(4px / var(--sk)); transition-delay: 250ms; } /* a ring on a photo: the 4px marker line, so it holds on the yellow */ .cklens .ring { stroke-width: var(--line); } .ckmini { box-sizing: border-box; padding: 8px; border: 4px solid color-mix(in srgb, var(--fg) 40%, transparent); border-radius: 24px; background: var(--bg); opacity: 0; transform: translateY(12px); transition: opacity var(--dur) ease, transform var(--dur) var(--ease-out); } .ckmini img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; } /* the trail's labels sit under each picture as small caps captions (the eyebrow style), never on the photo */ .ckmini .ptag { top: calc(100% + 16px); left: 50%; transform: translateX(-50%); padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: 21px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: color-mix(in srgb, var(--fg) 60%, transparent); } .ckmini.m0 .ptag { color: var(--fg); } .s-check.st-2 .ckmini { opacity: 1; transform: none; } .s-check.st-2 .ckmini.m2 { transition-delay: 750ms; } .s-check.st-2 .ckmini.m1 { transition-delay: 1000ms; } .s-check.st-2 .ckmini.m0 { transition-delay: 1350ms; } .s-check.st-3 .ckmini:not(.m0) { opacity: .35; transition-delay: 0ms; } .cktr { fill: none; stroke: var(--fg); stroke-width: var(--line); stroke-linecap: round; stroke-dasharray: 2 12; opacity: 0; transition: opacity var(--dur) ease; } .ckchev { fill: none; stroke: var(--fg); stroke-width: var(--line); stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity var(--dur) ease; } .s-check.st-2 .cktr { opacity: 1; transition: none; } .s-check.st-2 .ckchev { opacity: 1; transition: opacity 240ms ease 1700ms; } /* the trail stays (faded with the shares) so the settled frame and the PDF still show the way back */ .s-check.st-3 :is(.cktr, .ckchev) { opacity: .35; transition: opacity var(--dur) ease; } .ckm { fill: none; stroke: #fff; stroke-width: 16; stroke-dasharray: 1 1; stroke-dashoffset: 1; } .s-check.st-2 .ckm { stroke-dashoffset: 0; transition: stroke-dashoffset 1200ms var(--ease-out) 600ms; } .ckpan .ckn { white-space: nowrap; opacity: 0; } .s-check.st-1:not(.st-2) .ckn { opacity: 1; transition: opacity 240ms ease 1540ms; } .ckpan .ckchat { height: auto; gap: 28px; } .ckchat .msg p { font-size: var(--t-body); } .ckchat .msg.me { opacity: 0; transform: translateY(10px); transition: opacity 320ms ease, transform 320ms var(--ease-out); } .s-check.st-3 .ckchat .msg.me { opacity: 1; transform: none; } .s-check:not(.st-3) .ckchat .slot, .s-check.typing-now .ckchat .slot:not(.play) > :not(.wait) { visibility: hidden; } /* QR codes (quiz, build, home): pure white only behind the code, so phones can read it */ /* an activity as a screenshot that opens it (quiz, build, act, home): 16 x 10, the page in night mode */ .shot { display: block; width: 517px; aspect-ratio: 16 / 10; border-radius: 24px; overflow: hidden; box-shadow: 0 0 0 2px var(--row-separator); transition: box-shadow 160ms ease, transform 300ms var(--ease-out); } .shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; } .shot:is(:hover, :focus-visible) { box-shadow: 0 0 0 4px var(--orange); outline: none; } @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } /* 19 · learn: a duel of chat lanes (6 + 6) at 40px. Like Word, Ask and Check, each lane grows downward from under its header: earlier messages stay where they are and each new one opens its own room below (lg rows), so nothing above it moves. Then Friday's test. */ .lnd { display: grid; grid-template-columns: 788px 788px; column-gap: 24px; height: 100%; } .lnl { display: flex; flex-direction: column; min-height: 0; } .lnh { flex: none; } .lns { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; } .lg { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 320ms var(--ease-out); } .lgi { min-height: 0; overflow: hidden; } .lgi > * { margin-top: 12px; } .s-learn:not(.st-1) .g1, .s-learn:not(.st-2) .g2, .s-learn:not(.st-3) .g3 { grid-template-rows: 0fr; } /* all four rows fit in each lane, so both lanes keep the question when the test arrives (a fair side by side) */ .lnd .msg p { font-size: var(--t-body); max-width: 708px; } .lnd .g2 .msg { transition: opacity 320ms ease, transform 320ms var(--ease-out); } .s-learn:not(.st-2) .g2 .msg { opacity: 0; transform: translateY(10px); } .lnd .g3 { transition-duration: 420ms; } .lgi > .tcard { margin-top: 32px; } .tcard { padding: 12px 24px; border-radius: 12px; background: color-mix(in srgb, var(--fg) 6%, transparent); box-shadow: inset 0 0 0 2px var(--row-separator); transition: opacity 420ms ease, transform 420ms var(--ease-out); } .s-learn:not(.st-3) .tcard { opacity: 0; transform: translateY(24px); } .tlab { font-size: var(--t-label); line-height: 1.3; color: color-mix(in srgb, var(--fg) 60%, transparent); } .trow { display: flex; align-items: center; gap: 24px; margin-top: 8px; } .tq { flex: none; font-size: var(--t-lead); line-height: 1.25; } .tans { flex: 1 1 0; display: flex; align-items: center; gap: .3em; height: 76px; padding: 0 24px; box-sizing: border-box; border: 2px dashed color-mix(in srgb, var(--fg) 40%, transparent); border-radius: 12px; font-size: var(--t-lead); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; } .tk { opacity: 0; transition: opacity 160ms ease; } .s-learn.st-3 .tk { opacity: 1; transition-delay: calc(1020ms + var(--i, 0) * 120ms); } /* the payoff in an orange pill with night words (orange text on the day page is 2.4:1) */ .tk.fin { padding: 0 .22em; border-radius: 999px; background: var(--orange); color: var(--night); } .tk.stuck { color: color-mix(in srgb, var(--fg) 40%, transparent); } /* 20 · call: one line from no big deal to big deal; each situation stands on it (icon, words, what to do) */ .clw { position: relative; width: 100%; height: 100%; } .cl { position: relative; } .cl.fit { position: absolute; } .cl > svg { position: absolute; left: 0; top: 0; overflow: visible; } .clln { stroke: color-mix(in srgb, var(--fg) 40%, transparent); stroke-width: var(--line); stroke-linecap: round; } .s-call.arrive .clln { stroke-dasharray: 1 1; animation: draw 1200ms var(--ease-out) both; } .clend { position: absolute; font-size: var(--t-label); line-height: 1.3; white-space: nowrap; color: color-mix(in srgb, var(--fg) 60%, transparent); } .s-call.arrive .clend { animation: fx-in 240ms ease 960ms both; } .cldot { fill: var(--fg); transform-box: fill-box; transform-origin: center; transition: opacity 240ms ease, transform 240ms var(--ease-out); } .clnode { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 24px; transform: translateX(-50%); } .clt { display: contents; } .clnode :is(.icon, .cll, .cltag) { transition: opacity var(--dur) ease, transform var(--dur) var(--ease-out); } .clnode .icon { color: var(--fg); } .cll { font-size: var(--t-body); line-height: 1.3; white-space: nowrap; } .cltag { margin-top: -12px; font-size: var(--t-label); line-height: 1.25; padding: .12em .6em .16em; border-radius: 999px; white-space: nowrap; background: var(--bg); box-shadow: inset 0 0 0 2px var(--row-separator); } :is(.s-call:not(.st-1) .n0, .s-call:not(.st-2) .n1, .s-call:not(.st-3) .n2).cldot { opacity: 0; transform: scale(.5); } :is(.s-call:not(.st-1) .n0, .s-call:not(.st-2) .n1, .s-call:not(.st-3) .n2) :is(.icon, .cll, .cltag) { opacity: 0; transform: translateY(12px); } .s-call .clnode .icon { transition-delay: 160ms; } .s-call .clnode .cll { transition-delay: 240ms; } .s-call .clnode .cltag { transition-delay: 320ms; } /* the doctor: you ask for a person, the same idea as the orange "You" */ .s-call.st-3 .cltag.hot { background: var(--orange); color: var(--night); box-shadow: inset 0 0 0 2px var(--orange); transition: opacity var(--dur) ease 320ms, transform var(--dur) var(--ease-out) 320ms, background-color 240ms ease 980ms, color 240ms ease 980ms, box-shadow 240ms ease 980ms; } /* 21 · build: the tracked hand (columns 1 to 8), one fingertip up close as its two numbers, then the QR (9 to 12) */ .bd { position: relative; width: 1600px; height: 100%; } .bdhw { position: absolute; left: 0; top: 0; width: 1046px; height: 560px; } .bdh { position: relative; } .bdh.fit { position: absolute; } .bdh svg { position: absolute; left: 0; top: 0; overflow: visible; } .bdb line { stroke: color-mix(in srgb, var(--fg) 40%, transparent); stroke-width: var(--line); stroke-linecap: round; } .bdd circle { fill: var(--fg); } .s-build.arrive .bdd circle { animation: bd-gather 700ms var(--ease-out) calc(var(--i) * 30ms) both; } @keyframes bd-gather { from { opacity: 0; transform: translate(var(--dx), var(--dy)); } } .s-build.arrive .bdb line { stroke-dasharray: 1 1; animation: draw 600ms var(--ease-out) 700ms both; } .bdk { font-size: var(--t-label); dominant-baseline: central; fill: color-mix(in srgb, var(--fg) 60%, transparent); } .bdv { font-size: var(--t-lead); text-anchor: end; dominant-baseline: central; font-variant-numeric: tabular-nums; fill: var(--fg); } .bd .lensg :is(.tan, .ring, .rim) { transition: stroke 240ms ease; } .s-build.st-2 .bd .lensg :is(.tan, .ring, .rim) { stroke: color-mix(in srgb, var(--fg) 40%, transparent); } .bdn { position: absolute; left: 0; top: 588px; margin: 0; font-size: var(--t-body); line-height: 1.3; white-space: nowrap; transition: opacity var(--dur) ease, transform var(--dur) var(--ease-out); } .s-build:not(.st-1) .bdn { opacity: 0; transform: translateY(12px); } .s-build.st-1 .bdn { transition-delay: 1100ms; } .bdq { position: absolute; left: 1083px; top: 40px; width: 517px; transition: opacity var(--dur) ease; } .s-build:not(.st-2) .bdq { opacity: 0; } .bdu { margin-top: 24px; font-size: var(--t-body); line-height: 1.3; color: var(--fg); } /* 22 · home: the QR (columns 1 to 4) and the workshop page's three doors (6 to 12), as links. The rows span the QR's height exactly: the first rule on its top edge, the last on its bottom edge */ .hm { position: relative; width: 1600px; height: 100%; } .hmq { position: absolute; left: 0; top: 0; width: 517px; } .hmu { display: inline-block; margin-top: 24px; font-size: var(--t-body); line-height: 1.3; white-space: nowrap; color: var(--fg); transition: color 160ms ease; } .hmu:hover { color: var(--orange); } /* every door, in two columns of four rows that span the screenshot's height */ .hmr { position: absolute; left: 676px; top: 0; width: 924px; height: 323px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 1fr); grid-auto-flow: column; column-gap: 24px; } .hmrow { display: grid; grid-template-columns: 40px 1fr 32px; align-items: center; column-gap: 20px; border-top: 2px solid var(--row-separator); color: var(--fg); text-decoration: none; transition: color 160ms ease; } .hmrow .icon { color: color-mix(in srgb, var(--fg) 40%, transparent); transition: color 160ms ease, transform 300ms var(--ease-out); } .hmrow:is(:hover, :focus-visible) { color: var(--orange); outline: none; } .hmrow:is(:hover, :focus-visible) .icon { color: var(--orange); } .hmrow:is(:hover, :focus-visible) .icon:last-child { transform: translateX(6px); } .hmrow:nth-child(4n), .hmrow:last-child { border-bottom: 2px solid var(--row-separator); } .hmtt { font-size: 32px; line-height: 1.2; } .s-home.arrive .hmq { animation: fx-msg var(--dur) var(--ease-out) both; } .s-home.arrive .hmrow { animation: fx-msg var(--dur) var(--ease-out) calc(200ms + var(--i) * 100ms) both; } /* 23 · credits: two columns of rows, a lead word then one sentence */ .credits { columns: 2; column-gap: 24px; font-size: 24px; line-height: 1.4; } .crow { display: grid; grid-template-columns: 168px 1fr; column-gap: 24px; padding: 14px 0; border-top: 2px solid var(--row-separator); break-inside: avoid; } .crl { color: color-mix(in srgb, var(--fg) 60%, transparent); } .crow p { margin: 0; } .credits a { color: inherit; text-decoration: underline 2px color-mix(in srgb, var(--fg) 30%, transparent); text-underline-offset: .18em; } /* reduced motion: no movement, builds just appear */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0s !important; } #stage { transition: none !important; } /* the canvas snaps to its new fit, never passes through a tween */ [data-b] { transform: none !important; } } /* print / PDF: one slide per page, every build in its final state, then the glossary */ @page { size: 1920px 1080px; margin: 0; } .print html, .print body, html.print, html.print body { overflow: visible; height: auto; background: var(--bg); } .print #viewport { position: static; background: none; } .print #stage { position: static; transform: none !important; overflow: visible; background: none; height: auto; } .print .slide { position: relative; visibility: visible; opacity: 1; width: 1920px; height: 1080px; break-after: page; page-break-after: always; transition: none; } .print [data-b] { opacity: 1; transform: none; transition: none; } .print * { animation: none !important; transition: none !important; } .gloss { padding: 112px 160px; display: block !important; } .gloss h2 { font-size: 88px; font-weight: 400; margin: 0 0 48px; } .gloss dl { columns: 2; column-gap: 96px; margin: 0; font-size: 29px; line-height: 1.35; } .gloss .g { break-inside: avoid; margin: 0 0 24px; } /* the orange term runs into its definition, set apart by colour and a gap (no label colon) */ .gloss dt { display: inline; color: var(--orange); } .gloss dd { display: inline; margin: 0 0 0 .4em; } /* ── deck chrome: header pills sit above the slides (house.css has the pill styles) ── */ .top-blur, .header-pills { z-index: 50; } .print .top-blur, .print .header-pills, .print #overview { display: none !important; } /* keyboard focus looks like hover, plus the deck's 2px orange ring */ :is(.header-theme-pill, .header-back-pill, .header-pill):focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } /* the theme pill previews the next theme on focus too, as it does on hover */ [data-theme=day] .header-theme-pill:focus-visible .header-theme-pill__glyph[data-state=day], [data-theme=night] .header-theme-pill:focus-visible .header-theme-pill__glyph[data-state=night], [data-theme=system] .header-theme-pill:focus-visible .header-theme-pill__glyph[data-state=system], [data-theme=circadian] .header-theme-pill:focus-visible .header-theme-pill__glyph[data-state=circadian] { opacity: 0; transform: rotate(90deg) scale(.85); } [data-theme=day] .header-theme-pill:focus-visible .header-theme-pill__glyph[data-state=night], [data-theme=night] .header-theme-pill:focus-visible .header-theme-pill__glyph[data-state=system], [data-theme=system] .header-theme-pill:focus-visible .header-theme-pill__glyph[data-state=circadian], [data-theme=circadian] .header-theme-pill:focus-visible .header-theme-pill__glyph[data-state=day] { opacity: 1; transform: rotate(0) scale(1); } /* ── layout grid (Shift+G): 12 columns, 24px gutters, inside the 160px margins, as in the deck ── */ #grid-overlay { position: absolute; inset: 0 160px; z-index: 95; display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; pointer-events: none; } #grid-overlay[hidden] { display: none; } #grid-overlay i { background: color-mix(in srgb, var(--orange) 7%, transparent); box-shadow: inset 1px 0 0 color-mix(in srgb, var(--orange) 40%, transparent), inset -1px 0 0 color-mix(in srgb, var(--orange) 40%, transparent); } /* ── overview (C): every slide on the accent, like the deck's canvas view ── */ #overview { position: fixed; inset: 0; z-index: 45; overflow: auto; background: var(--orange); padding: 120px clamp(24px, 6vw, 96px) 64px; -webkit-user-select: none; user-select: none; } #overview[hidden] { display: none; } /* night glass pills over a flooded background: the overview */ body.canvas-open .header-pills { --pill-bg: rgba(13, 27, 30, 0.55); --fg: var(--white); --separator: color-mix(in srgb, var(--white) 14%, transparent); color: var(--white); } .ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px 24px; } /* align-self: a stretched button centres its content, which dropped one-line cards below two-line ones */ .ov-card { all: unset; cursor: pointer; display: block; align-self: start; } .ov-frame { display: block; position: relative; aspect-ratio: var(--ov-ar, 16 / 9); overflow: hidden; border-radius: 10px; background: var(--bg); border: 1px solid rgba(255, 245, 245, 0.4); opacity: 0.85; transition: opacity 300ms ease, border-color 300ms ease; } .ov-stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; pointer-events: none; color: var(--fg); } .ov-stage .slide { visibility: visible; opacity: 1; transition: none; } .ov-stage * { animation: none !important; transition: none !important; } .ov-card:hover .ov-frame, .ov-card:focus-visible .ov-frame { opacity: 1; border-color: var(--night); } /* night ring here, because the overview sits on orange */ .ov-card:focus-visible { outline: none; } .ov-card:focus-visible .ov-frame { outline: 2px solid var(--night); outline-offset: 2px; } .ov-card.is-here .ov-frame { opacity: 1; box-shadow: 0 0 0 3px var(--night); } .ov-label { display: block; margin-top: 10px; font-size: 15px; line-height: 1.3; color: var(--white); text-align: center; } /* ── portrait (phones, portrait iPads): the deck laid out fluid at the window size, with the deck's clamp type (one main size bounded by width and height), components stacked. Same slides, beats and keys; deck.js redraws the wide diagrams tall. ── */ .portrait #stage { left: 0; top: 0; width: 100%; height: 100%; transform: none; } .portrait .slide { padding: clamp(96px, 15vh, 150px) clamp(24px, 6vw, 48px) clamp(20px, 5vh, 60px); } .portrait .kicker { font-size: clamp(13px, 1.9vh, 16px); margin-bottom: clamp(8px, 1.3vh, 14px); } .portrait .line { font-size: clamp(34px, min(7vw, 10vh), 104px); margin-bottom: clamp(16px, 3.5vh, 40px); } .portrait .source { position: static; max-width: none; margin-top: 12px; font-size: 14px; } .portrait #grid-overlay { inset: 0 clamp(24px, 6vw, 48px); gap: 8px; } .portrait .s-title { display: flex; flex-direction: column; justify-content: flex-start; padding: clamp(110px, 16vh, 170px) clamp(24px, 6vw, 48px) 0; } /* words at the top, the magnified full stop in the space below them */ .portrait .s-title :is(.line, .sub) { position: relative; left: auto; top: auto; } .portrait .s-title .stop { margin-left: .1em; } .portrait .s-title .line { font-size: clamp(56px, min(15vw, 9vh), 150px); white-space: normal; margin: 0; } .portrait .s-title .sub { font-size: clamp(18px, 4.5vw, 30px); margin-top: clamp(10px, 2vh, 20px); white-space: normal; } /* credits run longer than a phone: the box scrolls, and its foot fades so the cut reads as "more below" (the padding lets the last row scroll clear of the fade) */ .portrait .s-credits .visual { overflow: auto; touch-action: pan-y pinch-zoom; scrollbar-width: thin; overscroll-behavior: contain; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); } .portrait .s-credits .credits { padding-bottom: 56px; } .portrait .tday .lab { font-size: 44px; } .portrait .tday .lab2 { font-size: 32px; } .portrait .use { grid-template-columns: repeat(2, 382px); row-gap: 40px; height: auto; } .portrait .use .lbl { font-size: 48px; } .portrait .use .how { font-size: 32px; } .portrait .s-patterns .visual { display: flex; flex-direction: column; } .portrait .pat { flex: 1 1 0; min-height: 0; } .portrait .pcap { position: static; margin-top: 8px; font-size: clamp(13px, 1.9vh, 16px); } .portrait .pd .pline { font-size: clamp(20px, 5.4vw, 40px); white-space: normal; } .portrait .pd .ctx[data-b] { display: block; width: auto; clip-path: none; } .portrait .pd .blank { border-bottom-width: .1em; } .portrait .pd .prows { margin-top: clamp(10px, 2vh, 24px); font-size: clamp(15px, 4vw, 26px); } .portrait .pd .prow { grid-template-columns: 5.6em 1fr 2.4em; column-gap: .5em; height: auto; padding: .4em 0; } .portrait .pd :is(.lb, .pc) { font-size: inherit; } .portrait .pd .trk { height: .7em; } .portrait .thread { height: auto; gap: clamp(12px, 2.4vh, 24px); } .portrait .msg { gap: 8px; } .portrait .msg p { font-size: clamp(18px, 4.5vw, 30px); max-width: calc(100% - 48px); } .portrait .avatar { width: 40px; height: 40px; } .portrait .avatar svg { width: 26px; height: 26px; } .portrait .avatar.ini { font-size: 15px; } .portrait .typing { left: 48px; gap: 8px; padding: 14px 16px; border-radius: 22px; border-bottom-left-radius: 7px; } .portrait .typing i { width: 9px; height: 9px; } .portrait .rep .wd::after { width: 3px; margin-left: 3px; } .portrait .picks { position: static; flex-direction: column; align-items: flex-start; gap: 12px; margin-left: 48px; } .portrait .chips { flex-direction: row; flex-wrap: wrap; gap: 8px; } .portrait .chip { font-size: clamp(14px, 3.8vw, 22px); } .portrait .picks .callout { font-size: clamp(13px, 3.4vw, 18px); padding: .5em .8em; } .portrait .ov-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 20px 12px; } .portrait .ov-label { font-size: 13px; } /* portrait: know, sounding, shown, captions, you */ .portrait .dots { gap: 8px; } .portrait .dots i { width: 9px; height: 9px; } .portrait .kn { width: auto; height: auto; display: flex; flex-direction: column; gap: clamp(14px, 2.6vh, 28px); } .portrait .kcol { display: contents; } .portrait .kq { order: 1; width: auto; height: auto; padding: .45em .9em .45em .7em; gap: .45em; border-width: 2px; font-size: clamp(18px, 4.5vw, 30px); } .portrait .kq .icon { width: 1.1em; height: 1.1em; } .portrait .kslot { order: 2; } .portrait .kans { gap: .5em; padding: .65em .75em; border-radius: 20px; } .portrait .kans p { font-size: clamp(18px, 4.5vw, 30px); } .portrait .kans .avatar { margin-top: 0; } .portrait .kans .dots { height: 40px; } .portrait .kright { order: 3; position: relative; left: auto; top: auto; width: auto; } /* the stamp lands on the answer's bottom-right corner; on the last beat the post takes its place */ .portrait .kstamp { left: auto; right: -.2em; top: -1.6em; z-index: 1; } .portrait .kstamp span { font-size: clamp(30px, 9vw, 60px); border-width: 4px; border-radius: 14px; background: var(--bg); } .portrait .kpost { padding: .7em .8em .8em; border-radius: 16px; } .portrait .kph { gap: 10px; } .portrait .kph i { width: 28px; height: 28px; } .portrait .kph span { font-size: clamp(14px, 2vh, 18px); } .portrait .kpost p { margin-top: .4em; font-size: clamp(16px, 4vw, 26px); } .portrait .kfix { order: 4; padding-left: 0; font-size: clamp(16px, 4vw, 26px); } .portrait .kn .source { order: 5; } .portrait .kt { display: none; } .portrait .duel { grid-template-columns: 1fr; row-gap: clamp(20px, 3.6vh, 44px); } .portrait .lane .lh { font-size: clamp(12px, 1.7vh, 15px); padding-bottom: 8px; } .portrait .lane .slot { margin-top: clamp(22px, 3.6vh, 40px); } .portrait .kring { stroke-width: var(--hair); } .portrait .kans .wd.it { --ring-pad: .3em; } .portrait .s-know.st-3 .kans .wd.it { margin: 0 calc(var(--ring-pad) + 6px); } .portrait .lane .ptag { top: -1.05em; left: .8em; font-size: clamp(13px, 3.4vw, 20px); box-shadow: 0 0 0 4px var(--bg); } .portrait .lane .ptag:not(.pt) { box-shadow: inset 0 0 0 2px var(--row-separator), 0 0 0 4px var(--bg); } .portrait .sh .lb, .portrait .sh .shchip { font-size: 44px; } .portrait .s-captions .visual { display: flex; flex-direction: column; } .portrait .cplay { position: relative; width: auto; height: auto; display: flex; flex-direction: column; gap: clamp(10px, 1.8vh, 18px); padding: clamp(12px, 2vh, 20px); border-width: 2px; border-radius: 20px; } .portrait :is(.cpmeta, .cpwave, .cpbar) { position: static; } .portrait .cpmeta { font-size: clamp(14px, 2vh, 18px); } .portrait .cpwave { width: 100%; height: auto; } .portrait .cpbar { height: auto; padding: .3em .8em; } .portrait .cpbar p { font-size: clamp(18px, 4.5vw, 30px); } .portrait .cpbar p { line-height: 1.6; text-wrap: pretty; } .portrait .cpbar .said { white-space: normal; } .portrait .board { grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.6vh, 16px); padding-top: 0; } .portrait .ytile { height: auto; min-height: clamp(56px, 9vh, 104px); gap: .55em; padding: .5em .8em; border-radius: 20px; font-size: clamp(15px, 4vw, 26px); } .portrait .ytile .icon { width: 1.5em; height: 1.5em; } /* portrait: whose, choose, ask, fake, quiz, check */ .portrait .s-whose .visual { display: flex; flex-direction: column; } .portrait .whw { flex: 1 1 0; min-height: 0; height: auto; } .portrait .wh .whl { font-size: 40px; } .portrait .wh .whn { white-space: normal; width: 340px; box-sizing: border-box; font-size: 32px; } .portrait .ch { width: auto; height: auto; display: flex; flex-direction: column; gap: clamp(12px, 2.4vh, 24px); } .portrait .chc { position: relative; left: auto; top: auto; width: auto; height: auto; padding: .6em .8em; border-width: 2px; border-radius: 20px; font-size: clamp(18px, 4.5vw, 30px); } .portrait .chd { font-size: inherit; } .portrait .chbar { position: static; margin-top: .7em; } .portrait .chf { width: 4em; height: 3em; border-width: 2px; border-radius: 12px; } .portrait .chf .icon { width: 1.4em; height: 1.4em; } .portrait .chcap { font-size: clamp(13px, 3.4vw, 18px); } .portrait .chsend { width: 1.9em; height: 1.9em; border-width: 2px; } .portrait .chsend .icon { width: 1em; height: 1em; } .portrait .chc { order: 1; } .portrait .ch .chn { order: 3; } .portrait .chsw { order: 2; position: static; width: auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(12px, 4vw, 24px); } .portrait .chr { height: auto; padding: .5em 0; gap: .5em; font-size: clamp(15px, 4vw, 24px); } .portrait .chr + .chr { border-top: 0; } .portrait .chr:nth-child(n+3) { border-top: 1px solid var(--row-separator); } .portrait .tgl { width: 2.2em; height: 1.2em; outline-width: 2px; outline-offset: 2px; } .portrait .tgl i { top: .1em; left: 1.1em; width: 1em; height: 1em; } .portrait :is(.s-choose.st-1 .r0, .s-choose.st-2 .r1, .s-choose.st-4 .r3) .tgl i { left: .1em; } .portrait .ch .chn { position: static; white-space: normal; align-self: flex-start; font-size: clamp(13px, 3.4vw, 18px); padding: .5em .8em; } .portrait .ak { gap: clamp(14px, 2.6vh, 28px); } .portrait .akcol { gap: .4em; min-width: 0; } .portrait .akph { width: clamp(150px, 46vw, 300px); height: auto; aspect-ratio: 3 / 2; border-width: 2px; border-radius: 14px; } .portrait .akph .icon { width: 30%; height: auto; } .portrait .s-fake .visual { container-type: size; } .portrait .fk { grid-template-columns: 1fr; row-gap: clamp(10px, 2vh, 20px); } .portrait .fkf { width: min(100cqw, (100cqh - 90px) * .75); height: auto; aspect-ratio: 3 / 2; border-radius: 16px; } .portrait .fkf .fkt { top: 10px; left: 10px; font-size: clamp(14px, 3.6vw, 22px); box-shadow: inset 0 0 0 2px var(--row-separator), 0 0 0 4px var(--bg); } .portrait .fkf .fkt.pt { box-shadow: 0 0 0 4px var(--bg); } .portrait .fkr { font-size: clamp(16px, 4vw, 26px); } .portrait .qz { width: auto; height: auto; display: flex; flex-direction: column; gap: clamp(12px, 2.4vh, 24px); } .portrait :is(.qzl, .qzr) { position: relative; left: auto; width: auto; } .portrait .qz .shot { width: min(60vw, 40vh, 360px); border-radius: 16px; } .portrait .qzu { margin-top: .4em; font-size: clamp(16px, 4vw, 26px); } .portrait .qzi { font-size: clamp(18px, 4.5vw, 30px); } .portrait .qzp { grid-template-columns: 1fr 1fr; column-gap: 10px; } .portrait .qzf { width: auto; height: auto; aspect-ratio: 3 / 2; border-radius: 14px; } .portrait .qzf .ptag { top: 8px; left: 8px; font-size: clamp(12px, 3vw, 18px); box-shadow: 0 0 0 4px var(--bg); } .portrait .qzf .ptag:not(.pt) { box-shadow: inset 0 0 0 2px var(--row-separator), 0 0 0 4px var(--bg); } .portrait .qzlook { margin-top: .6em; font-size: clamp(15px, 3.8vw, 24px); } /* check: the rail becomes three numbered dots in a row, with only the current way's words */ .portrait .ck { width: auto; height: 100%; display: flex; flex-direction: column; gap: clamp(10px, 2vh, 20px); } .portrait .ckrail { position: relative; width: auto; height: auto; display: flex; align-items: center; gap: .45em; font-size: clamp(16px, 4.4vw, 26px); } .portrait .ckline, .portrait .ckw .icon { display: none; } .portrait .ckw { display: contents; } .portrait .ckdot { display: grid; place-items: center; width: 1.5em; height: 1.5em; margin: 0; background: color-mix(in srgb, var(--fg) 6%, transparent); box-shadow: inset 0 0 0 2px var(--row-separator); color: color-mix(in srgb, var(--fg) 40%, transparent); } .portrait .cksk { display: none; } .portrait .ckdot b { display: block; font-size: .8em; line-height: 1; } .portrait :is(.s-check.st-1 .w0, .s-check.st-2 .w1, .s-check.st-3 .w2) .ckdot { background: var(--fg); color: var(--bg); box-shadow: none; } .portrait :is(.s-check.st-1:not(.st-2) .w0, .s-check.st-2:not(.st-3) .w1, .s-check.st-3 .w2) .ckdot { background: var(--orange); color: var(--night); } .portrait .ckw span { display: none; order: 4; margin-left: .3em; font-size: inherit; color: var(--fg); } .portrait :is(.s-check.st-1:not(.st-2) .w0, .s-check.st-2:not(.st-3) .w1, .s-check.st-3 .w2) span { display: inline; } .portrait .ckp { position: relative; left: auto; top: auto; width: auto; height: auto; flex: 1 1 0; min-height: 0; } .portrait .ckpan .ckn { white-space: normal; width: 520px; font-size: 32px; } .portrait .ckmini .ptag { font-size: clamp(11px, 2.6vw, 15px); top: calc(100% + 8px); } /* the panel is a fixed design scaled to fit: its chat keeps the design's sizes */ .portrait .ckchat .msg p { font-size: var(--t-body); max-width: none; } .portrait .ckchat .avatar { width: 56px; height: 56px; } .portrait .ckchat .avatar svg { width: 36px; height: 36px; } .portrait .ckchat .avatar.ini { font-size: 20px; } .portrait .ckchat .dots { gap: 12px; } .portrait .ckchat .dots i { width: 14px; height: 14px; } /* portrait: learn, call, build, home, credits */ .portrait .lnd { grid-template-columns: 1fr 1fr; column-gap: 12px; font-size: clamp(14px, 3.6vw, 28px); } .portrait .lnh { font-size: clamp(12px, 1.7vh, 15px); padding-bottom: 8px; } .portrait .lgi > * { margin-top: .7em; } .portrait .lnd .msg { gap: 0; } .portrait .lnd .avatar { display: none; } .portrait .lnd .msg p { font-size: 1em; max-width: 100%; } .portrait .lgi > .tcard { margin-top: 1em; } .portrait .tcard { padding: .6em .7em; border-radius: 10px; } .portrait .tlab { font-size: clamp(13px, 1.9vh, 16px); } .portrait .trow { flex-direction: column; align-items: stretch; gap: .4em; margin-top: .3em; } .portrait .tq { font-size: 1.25em; } .portrait .tans { flex: none; height: 2.2em; padding: 0 .6em; border-radius: 10px; font-size: 1.25em; } .portrait .clnode { flex-direction: row; align-items: flex-start; gap: 24px; transform: none; } .portrait .clt { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 2px; } .portrait .cltag { margin-top: 0; } .portrait .cll { font-size: 44px; } .portrait .clend, .portrait .cltag { font-size: 32px; } .portrait .bd { width: auto; display: flex; flex-direction: column; gap: clamp(10px, 2vh, 20px); } .portrait .bdhw { position: relative; width: auto; height: auto; flex: 1 1 0; min-height: 0; } .portrait .bdn { position: static; white-space: normal; font-size: clamp(16px, 4vw, 26px); } .portrait .bdq { position: static; width: auto; display: flex; align-items: center; gap: clamp(12px, 3vw, 24px); } .portrait .bdq .shot, .portrait .hmq .shot { flex: none; width: min(44vw, 30vh, 280px); border-radius: 14px; } .portrait .bdu { margin: 0; font-size: clamp(16px, 4vw, 26px); } .portrait .hm { width: auto; height: auto; display: flex; flex-direction: column; gap: clamp(14px, 2.6vh, 28px); } .portrait :is(.hmq, .hmr) { position: relative; left: auto; width: auto; } .portrait .hmq { display: flex; align-items: center; gap: clamp(12px, 3vw, 24px); } .portrait .hmu { margin: 0; white-space: normal; font-size: clamp(16px, 4vw, 26px); } .portrait .hmrow { grid-template-columns: 1.4em 1fr 1.4em; column-gap: .7em; height: auto; padding: .6em 0; border-top-width: 1px; font-size: clamp(16px, 4.4vw, 26px); } .portrait .hmr { height: auto; display: block; } .portrait .hmrow:nth-child(4n) { border-bottom: 0; } .portrait .hmrow:last-child { border-bottom: 1px solid var(--row-separator); } .portrait .hmrow .icon { width: 1.4em; height: 1.4em; } .portrait .hmtt { font-size: 1em; } .portrait .credits { columns: 1; font-size: 15px; } .portrait .crow { grid-template-columns: 1fr; row-gap: 2px; padding: 10px 0; border-top-width: 1px; } /* More to try (kind "act"): the QR on the left like the quiz, the steps building on the right */ .ac { position: relative; width: 1600px; height: 100%; } .acl { position: absolute; left: 0; top: 0; width: 517px; } .acl .qzu { margin-top: 24px; } .acr { position: absolute; left: 676px; top: 0; width: 924px; } .ac--noqr .acr { left: 0; width: 1400px; } .acs { list-style: none; margin: 0; padding: 0; display: grid; row-gap: 40px; } .acs li { display: grid; grid-template-columns: 72px 1fr; column-gap: 28px; align-items: start; font-size: var(--t-lead); line-height: 1.2; text-wrap: pretty; } .acs b { display: grid; place-items: center; width: 72px; height: 72px; margin-top: -2px; border-radius: 50%; background: var(--orange); color: var(--bg); font-size: var(--t-label); font-weight: 400; } .acq { margin: 56px 0 0 100px; font-size: var(--t-body); line-height: 1.3; color: var(--orange); text-wrap: balance; } .portrait .ac { width: auto; height: auto; display: flex; flex-direction: column; gap: clamp(12px, 2.4vh, 24px); } .portrait :is(.acl, .acr) { position: relative; left: auto; width: auto; } .portrait .ac .shot { width: min(60vw, 36vh, 360px); border-radius: 16px; } .portrait .acl .qzu { margin-top: .4em; font-size: clamp(16px, 4vw, 26px); } .portrait .acs { row-gap: clamp(10px, 2vh, 20px); } .portrait .acs li { grid-template-columns: 1.6em 1fr; column-gap: .6em; font-size: clamp(18px, 4.5vw, 30px); } .portrait .acs b { width: 1.6em; height: 1.6em; font-size: .6em; margin-top: .1em; } .portrait .acq { margin: .8em 0 0; font-size: clamp(16px, 4vw, 26px); }