/* Serialect: the exercise book. The cover is the app's sugar-paper blue, the page is white and ruled, and the
   one strong mark is the pencil. Every drawn page sizes in em from --u, so its lines, rules and pencil scale as one. */

body.k-page.k-serialect {
  --k-bg: #FFFFFF;
  --k-bg-2: #6FA2BF;
  --k-ink: #10202B;
  --k-ink-2: #40505B;
  --k-accent: #4F4A96;
  --k-accent-ink: #FFFFFF;
  --k-card: #FFFFFF;
  --k-line: rgba(16, 32, 43, .14);
  --k-display: "Iowan Old Style", "Iowan Old Style BT", Palatino, "Palatino Linotype", Georgia, serif;

  --sl-cover: #6FA2BF;
  --sl-cover-ink: #10202B;
  --sl-cover-ink-2: #1E3646;
  --sl-night: #2C4757;
  --sl-night-ink: #E6ECF1;
  --sl-night-ink-2: #C4D2DC;
  --sl-dark-page: #12171C;
  --sl-rule: #DDE2EE;
  --sl-margin: #E4A7AE;
  --sl-learning: #8E8BBB;
  --sl-red: #D6322B;
}
.k-serialect main :where(h1, h2) { font-weight: 700; letter-spacing: -.012em; }
.k-serialect main .k-h3 { font-weight: 700; letter-spacing: -.008em; }
.k-serialect .k-lockup img { border-radius: 12px; }
.k-serialect .k-btn-primary { background: var(--k-accent); color: #fff; }
.k-serialect .k-step .k-h2 { text-wrap: balance; }

/* The site's nav stands on the cover at the top of the page */
.k-serialect .mx-header:not(.is-scrolled) .mx-nav a { color: var(--sl-cover-ink); }

/* The little pencil that writes on the labels and slips */
.sl-point { position: absolute; left: 0; top: 0; width: 7em; height: 1em; pointer-events: none; }

/* ---------- The hero: the app's own screen at the size of a room ---------- */
.sl-run { position: relative; overflow-x: clip; background: var(--sl-cover); }
.sl-hero { padding: 0; min-height: 0; display: block; align-items: stretch; background: var(--sl-cover); overflow-x: clip; }
.sl-hero .k-lockup b { color: var(--sl-cover-ink); }
.sl-hero .k-lockup span { color: var(--sl-cover-ink-2); }
.sl-hero { --h1: clamp(40px, min(5.9vw, 10svh), 112px); }
.sl-hero .k-h1 { font-size: var(--h1); line-height: 1.02; }
.sl-hero .k-lead { font-size: clamp(17px, 1.32vw, 22px); line-height: 1.42; max-width: 40ch; color: var(--sl-cover-ink-2); }
.sl-hero .k-lead strong { color: var(--sl-cover-ink); }
.sl-price { font-size: 16px; line-height: 1.4; color: var(--sl-cover-ink-2); max-width: 42ch; }
.sl-hero .k-meta { font-size: 14px; line-height: 1.4; color: var(--sl-cover-ink-2); max-width: 46ch; }
.sl-hero .k-btn { min-height: 46px; }
.sl-hero .k-btn-quiet { box-shadow: inset 0 0 0 1.5px var(--sl-cover-ink); }
.sl-hero .k-soon { color: var(--sl-cover-ink); padding-left: 0; }
.sl-hero .k-soon::before { background: var(--sl-cover-ink); box-shadow: 0 0 0 3px rgba(16, 32, 43, .18); }

.sl-page {
  --step: 1.56em;
  --head: 2.3em;
  --rows: 15;
  position: relative; background: #fff; color: var(--k-ink); overflow: hidden;
  border-radius: 26px 26px 0 0; font-family: var(--k-display); box-shadow: 0 -16px 34px -24px rgba(16, 32, 43, .5);
  min-height: calc(var(--head) + var(--rows) * var(--step));
}
.sl-rules { position: absolute; left: 0; right: 0; top: var(--head); bottom: 0;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--step) - 1px), var(--sl-rule) calc(var(--step) - 1px), var(--sl-rule) var(--step)); }
.sl-margin { position: absolute; left: var(--mx); top: 0; bottom: 0; width: 1px; background: var(--sl-margin); }
.sl-sheet { position: absolute; left: calc(var(--mx) + .6em); top: 0; width: var(--sheet-w); height: calc(var(--head) + var(--rows) * var(--step)); }
.sl-head { position: absolute; left: 0; right: 0; top: 0; height: var(--head); display: flex; align-items: flex-end; gap: 1em; padding-bottom: .34em; box-sizing: border-box; white-space: nowrap; }
.sl-num { position: absolute; right: calc(100% + 1.02em); bottom: .34em; font-weight: 700; font-size: .84em; line-height: 1.15; }
.sl-title { font-weight: 700; font-size: .84em; line-height: 1.15; }
.sl-fig { font: 400 .47em/1.3 var(--k-text); color: var(--k-ink-2); padding-bottom: .24em; }
.sl-fig b { font-weight: 600; }
.sl-lines { position: absolute; left: 0; top: var(--head); }
.sl-line { height: var(--step); }
.sl-line > span { display: inline-block; position: relative; white-space: nowrap; line-height: 1; padding-top: calc(var(--step) - 1.16em); padding-right: .1em; }
.sl-page u { text-decoration: none; position: relative; display: inline-block; }
.sl-page u::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-.08em - 1px); height: max(2px, .075em); background: var(--k-accent); }

/* The pencil: its point is the carriage's corner, its length runs off to the lower right */
.sl-car { position: absolute; left: var(--rest-x); top: var(--rest-y); width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.sl-pencil { position: absolute; left: 0; top: 0; width: 19em; height: 1.9em; margin-top: -.95em; transform-origin: 0 50%; transform: rotate(var(--rest-r)); overflow: visible; filter: drop-shadow(.1em .22em .16em rgba(16, 32, 43, .26)); }
/* With motion the page opens part-way through a line, the pencil's point on it; kit.js and serialect.js take it from there. */
html.k-motion .sl-car { left: 0; top: 0; transform: translate(var(--open-x), var(--open-y)); }
html.k-motion .sl-pencil { transform: rotate(var(--open-r)); }
html.k-motion .sl-lines-w .sl-line:nth-child(2) > span { clip-path: inset(-30% 42% -45% -2%); }
html.k-motion .sl-lines-w .sl-line:nth-child(n+3) > span { clip-path: inset(-30% 100% -45% 0%); }
html.k-motion .sl-col-r:nth-of-type(n+3) { clip-path: inset(-30% 100% -45% 0%); }
/* The notebook column: each new word, with its meaning, on the same rules as the story */
.sl-col { display: none; position: absolute; left: calc(var(--mx) + 30.6em); right: var(--k-gutter); top: 0; bottom: 0; }
/* The fold of the open book, with its two staples */
.sl-col::before { content: ""; position: absolute; left: -1.9em; width: 2.6em; top: 0; bottom: 0; background: linear-gradient(to right, transparent, rgba(16, 32, 43, .06) 44%, rgba(16, 32, 43, .16) 50%, rgba(16, 32, 43, .03) 56%, transparent); }
.sl-col::after { content: ""; position: absolute; left: -.62em; top: 3.2em; width: 3px; height: 1.1em; border-radius: 2px; background: #9DA9B3; box-shadow: 1px 0 0 rgba(255, 255, 255, .8), 0 6.4em 0 #9DA9B3; }
.sl-col-h { height: var(--head); box-sizing: border-box; padding-bottom: .62em; display: flex; align-items: flex-end; font: 400 .47em/1.3 var(--k-text); color: var(--k-ink-2); height: calc(var(--head) / .47); }
.sl-col-r { height: var(--step); display: flex; align-items: flex-end; gap: .9em; padding-bottom: .22em; box-sizing: border-box; white-space: nowrap; font-size: .68em; height: calc(var(--step) / .68); padding-bottom: .3em; }
.sl-col-r b { font-weight: 400; position: relative; }
.sl-col-r b::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.34em; height: max(2px, .1em); background: var(--k-accent); }
.sl-col-r span { color: var(--k-ink-2); font-family: var(--k-text); font-size: .86em; }
@media (min-width: 1180px) { .sl-col { display: block; } }
/* A meaning pencilled over the first new words, where the meanings column isn't shown (phones and
   small windows), so a stranger can see the underlines are the words to learn. */
.sl-gl { position: relative; display: inline-block; }
.sl-pen { position: absolute; left: 0; right: 0; bottom: 100%; margin-bottom: .1em; text-align: center; font: 500 .68em/1 var(--k-text); font-style: normal; color: var(--k-accent); white-space: nowrap; }
@media (min-width: 1180px) { .sl-pen { display: none; } }
html.k-motion .sl-lines-n .sl-line:nth-child(4) > span { clip-path: inset(-30% 58% -45% -2%); }
html.k-motion .sl-lines-n .sl-line:nth-child(n+5) > span { clip-path: inset(-30% 100% -45% 0%); }

@media (min-width: 900px) {
  .sl-hero { display: grid; grid-template-rows: auto minmax(0, 1fr); }
  .sl-hero-grid { display: contents; }
  .sl-hero .k-hero-copy { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 3.4vw, 64px); align-items: end;
    padding: calc(var(--mx-header-h, 72px) + 16px) var(--k-gutter) 26px; }
  .sl-hero .k-hero-head > * + * { margin-top: 18px; }
  .sl-hero .k-hero-more > * + * { margin-top: 12px; }
  .sl-hero .k-hero-copy > * + * { margin-top: 0; }
  .sl-page {
    --w: calc(100vw - 2 * var(--k-gutter));
    --u: clamp(23px, min(calc(var(--w) / 33), calc((100svh - 204px - 2.04 * var(--h1)) / 15)), 62px);
    --mx: calc(var(--k-gutter) - .6em);
    --sheet-w: 33em;
    --rest-x: 76%; --rest-y: 52.4%; --rest-r: -9deg;
    --open-x: 50.4%; --open-y: 20.7%; --open-r: 20.6deg;
    font-size: var(--u);
  }
  .sl-lines-n { display: none; }
  .sl-page { min-height: calc(var(--head) + 10 * var(--step)); }
}
@media (min-width: 900px) and (min-height: 820px) {
  .sl-run { height: 245svh; }
  .sl-hero { position: sticky; top: 0; height: 100svh; overflow: hidden; }
  .sl-page { min-height: 0; }
}
@media (max-width: 899px) {
  .sl-hero-grid { gap: 0; }
  .sl-hero .k-hero-head { padding: calc(var(--mx-header-h, 60px) + 12px) var(--k-gutter) 20px; }
  .sl-hero .k-hero-head > * + * { margin-top: 12px; }
  .sl-hero .k-h1 { font-size: clamp(34px, 9.9vw, 62px); }
  .sl-hero .k-hero-more { padding: 26px var(--k-gutter) 44px; background: #fff; }
  .sl-hero .k-hero-more > * + * { margin-top: 16px; }
  .sl-hero .k-lead, .sl-hero .k-meta, .sl-price { color: var(--k-ink-2); }
  .sl-hero .k-lead strong { color: var(--k-ink); }
  .sl-hero .k-lead { font-size: 19px; }
  .sl-hero .k-btn-quiet { box-shadow: inset 0 0 0 1.5px var(--k-ink); }
  .sl-hero .k-soon::before { background: var(--k-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-accent) 30%, transparent); }
  .sl-page {
    --u: min(calc((100vw - 72px) / 16.6), 30px);
    --mx: 2em;
    --sheet-w: 16.6em;
    --head: 4em;
    --step: 1.6em;
    --rows: 13;
    --rest-x: 1%; --rest-y: 93.8%; --rest-r: -1deg;
    --open-x: 38.6%; --open-y: 41.6%; --open-r: 13deg;
    font-size: var(--u);
  }
  .sl-lines-w { display: none; }
  .sl-head { gap: 0; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding-bottom: .34em; }
  .sl-num { bottom: auto; top: calc(var(--head) - 3.05em); font-size: 1.1em; right: calc(100% + .78em); }
  .sl-title { font-size: 1.1em; }
  .sl-fig { font-size: .72em; padding-bottom: 0; }
  .sl-fig b { display: block; }
  .sl-fig .sl-dot { display: none; }
  .sl-pencil { width: 17em; height: 1.5em; margin-top: -.75em; }
}

/* ---------- Chapter 1: the exercise book's cover, its printed label filling in ---------- */
.sl-visual-book { justify-content: flex-end; gap: clamp(20px, 3vw, 48px); }
.sl-book { position: relative; flex: none; width: clamp(236px, 22vw, 330px); aspect-ratio: 5 / 7; transform: rotate(-2.4deg); font-family: var(--k-display); color: var(--sl-cover-ink); font-size: clamp(14px, 1.28vw, 19px); }
.sl-book::before { content: ""; position: absolute; left: .6%; right: -1.8%; top: 1.4%; bottom: -1.6%; background: #fff; border-radius: 3px 6px 6px 3px; box-shadow: 0 0 0 1px rgba(16, 32, 43, .12), 0 28px 48px -22px rgba(16, 32, 43, .55), 0 8px 16px -8px rgba(16, 32, 43, .28); }
.sl-book-c { position: absolute; inset: 0; background: var(--sl-cover); border-radius: 4px 7px 7px 4px; box-shadow: 0 1px 0 #5B8BA6; overflow: hidden; }
.sl-book-c::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2.4%; background: rgba(16, 32, 43, .12); }
.sl-label { position: absolute; left: 9%; right: 6%; top: 11%; box-shadow: inset 0 0 0 1px rgba(16, 32, 43, .55); border-radius: 14px; padding: 1em .9em 1.2em; }
.sl-label > b { display: block; font-size: 1.62em; line-height: 1.1; margin-bottom: .7em; }
.sl-f { position: relative; display: grid; grid-template-columns: 3.9em minmax(0, 1fr); align-items: baseline; border-bottom: 1px solid rgba(16, 32, 43, .7); padding: .5em 0 .18em; }
.sl-f > span { font: 400 .72em/1.2 var(--k-text); color: var(--sl-cover-ink-2); }
.sl-f > em { grid-column: 2; grid-row: 1; font-style: normal; font-size: .98em; line-height: 1.2; white-space: nowrap; }
.sl-wr2 { display: none; }
html.k-motion .sl-wr2 { display: block; }
.sl-deck { position: absolute; left: 13%; right: 16%; bottom: 7%; background: #fff; border-radius: 6px; padding: .6em .8em; box-shadow: 0 10px 18px -10px rgba(16, 32, 43, .5); display: flex; flex-direction: column; gap: .1em; transform: rotate(-2deg); }
.sl-deck b { font: 600 .78em/1.25 var(--k-text); color: var(--k-ink); }
.sl-deck span { font: 400 .72em/1.25 var(--k-text); color: var(--k-ink-2); }
html:not(.k-motion) .sl-deck { display: none; }

/* ---------- Bands ---------- */
.sl-night { background: var(--sl-night); color: var(--sl-night-ink); }
.sl-night .k-h2, .sl-night .k-h3 { color: var(--sl-night-ink); }
.sl-night .k-body, .sl-night p { color: var(--sl-night-ink-2); }
.sl-band-copy > * + * { margin-top: 20px !important; }
.sl-band-copy .k-body, .sl-fix-cap { max-width: 46ch; font-size: clamp(18px, 1.34vw, 21px); }
.k-step .k-body { max-width: 38ch; font-size: clamp(17px, 1.24vw, 20px); }
.sl-fix-col { min-width: 0; }
.k-page main .sl-fix-cap { margin-top: 18px; }
.sl-night .sl-fix-cap { color: var(--sl-night-ink-2); }
.sl-coverband { background: var(--sl-cover); color: var(--sl-cover-ink); }
.sl-coverband .k-body { color: var(--sl-cover-ink-2); }
.sl-coverband .k-body b { color: var(--sl-cover-ink); }
.sl-coverband .k-body i { font-style: normal; font-family: var(--k-display); font-weight: 700; color: var(--sl-cover-ink); }
.k-band.sl-tall { min-height: 100svh; display: flex; align-items: center; }
.k-band.sl-tall > .k-wrap { width: 100%; padding-left: var(--k-gutter); padding-right: var(--k-gutter); }

/* ---------- Chapter 2: the writer's check, on the page in low light. Lines are spaced for corrections, as a teacher's would be. ---------- */
.sl-fix { --u: clamp(23px, 2.5vw, 36px); font-size: var(--u); font-family: var(--k-display); position: relative; background: var(--sl-dark-page); border-radius: 26px; padding: .9em 1em 1.1em 2.2em; color: #E8EBEE; overflow: hidden; }
.sl-fix::before { content: ""; position: absolute; left: 1.55em; top: 0; bottom: 0; width: 1px; background: #6B4750; }
.sl-fix-head { display: block; font-weight: 700; font-size: .84em; line-height: 1.2; position: relative; margin-bottom: .2em; }
.sl-fix-head b { position: absolute; right: calc(100% + .9em); top: 0; }
.sl-rw { position: relative; box-sizing: content-box; height: 1.16em; padding-top: 1.06em; border-bottom: 1px solid #262F38; line-height: 1.16em; white-space: nowrap; }
.sl-rw > span { position: relative; display: inline-block; }
.sl-strike { position: absolute; left: -.06em; right: -.06em; top: 54%; height: max(2px, .07em); background: #EC5A50; transform-origin: 0 50%; display: block; }
.sl-put { position: absolute; left: 0; bottom: 96%; white-space: nowrap; color: #A9A6D6; font-weight: 700; }
.sl-gloss { display: block; font: 400 max(13.5px, .44em)/1.35 var(--k-text); color: #A3AEB8; padding: .55em 0 0; }
.sl-writer { font: 400 max(15px, .5em)/1.4 var(--k-text); color: #A3AEB8; margin-top: 1.5em; }
.sl-state { display: grid; margin-bottom: .5em; }
.sl-state b { grid-area: 1 / 1; font-weight: 600; color: #E8EBEE; }
.sl-state .sl-state-2 { color: #A9A6D6; opacity: 0; }
html:not(.k-motion) .sl-state b { opacity: 0; }
html:not(.k-motion) .sl-state .sl-state-2 { opacity: 1; }
.sl-bar { height: 2px; background: #262F38; border-radius: 1px; overflow: hidden; margin-bottom: .55em; }
.sl-bar i { display: block; height: 100%; width: 100%; background: #A9A6D6; transform-origin: 0 50%; }
.sl-pct { font-variant-numeric: tabular-nums; }

/* ---------- Chapter 3: the notebook beside the phone ---------- */
.sl-visual-notes { justify-content: flex-start; gap: clamp(20px, 3vw, 48px); }
.sl-note { position: relative; flex: none; width: clamp(220px, 20vw, 300px); background: #fff; font-family: var(--k-display); font-size: clamp(16px, 1.42vw, 21px); color: var(--k-ink); border-radius: 5px; transform: rotate(1.6deg);
  box-shadow: 0 0 0 1px rgba(16, 32, 43, .08), 0 26px 44px -22px rgba(16, 32, 43, .45), 0 6px 14px -8px rgba(16, 32, 43, .2); padding: 1.1em 0 1em; }
.sl-note-t { font: 600 .68em/1.2 var(--k-text); color: var(--k-ink-2); padding: 0 1.4em .8em; margin-left: .2em; }
.sl-n { position: relative; display: grid; grid-template-columns: 44% 1fr; height: 1.72em; line-height: 1.72em; border-top: 1px solid var(--sl-rule); }
.sl-note .sl-n:nth-last-child(2) { border-bottom: 1px solid var(--sl-rule); }
.sl-n::before { content: ""; position: absolute; left: 44%; top: 0; bottom: 0; width: 1px; background: var(--sl-margin); }
.sl-n > b { font-weight: 400; padding-left: .7em; position: relative; overflow: hidden; white-space: nowrap; }
.sl-n > span { padding-left: .6em; color: var(--k-ink-2); white-space: nowrap; }
.sl-n > i { position: absolute; left: .7em; width: calc(44% - 1.1em); bottom: -1px; height: 2px; background: var(--k-accent); transform-origin: 0 50%; }
.sl-say { font-family: var(--k-display); }
.sl-say b { font-weight: 400; position: relative; display: inline-block; }
.sl-say i { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--k-accent); transform-origin: 0 50%; }
.sl-say-note { margin: .7em .8em 0; font-size: .86em; line-height: 1.5; color: var(--k-ink); white-space: normal; }
html:not(.k-motion) .sl-say i { display: none; }

/* ---------- Chapter 4: the season, laced with the red string ---------- */
.sl-season { font-family: var(--k-display); color: var(--sl-cover-ink); position: relative; padding-left: 2.5em; font-size: clamp(18px, 1.6vw, 24px); }
.sl-season-t { font: 400 .68em/1.3 var(--k-text); color: var(--sl-cover-ink-2); margin-bottom: .9em; }
.sl-eps { list-style: none; margin: 0; padding: 0; position: relative; }
.sl-eps li { position: relative; display: grid; grid-template-columns: 1.6em minmax(0, 1fr) 1.3em; align-items: baseline; height: 2.02em; line-height: 2.02em; border-top: 1px solid rgba(16, 32, 43, .28); }
.sl-eps li:last-child { border-bottom: 1px solid rgba(16, 32, 43, .28); }
.sl-eps li > b { font-weight: 400; text-align: right; padding-right: .5em; }
.sl-tick { width: 1.05em; height: 1.05em; justify-self: end; align-self: center; overflow: visible; }
.sl-tick path { fill: none; stroke: var(--sl-cover-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sl-string { position: absolute; left: -.4em; top: 2.05em; width: 2.5em; height: calc(12 * 2.02em); overflow: visible; }
.sl-string circle { fill: var(--sl-night); }
.sl-string path { fill: none; stroke: var(--sl-red); stroke-width: 3.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sl-end { margin-top: .9em; font: 600 .68em/1 var(--k-text); color: var(--sl-cover-ink); text-align: right; }

/* ---------- Chapter 5: read it back ---------- */
.sl-hear { position: relative; flex: none; width: clamp(240px, 22vw, 330px); background: #fff; font-family: var(--k-display); font-size: clamp(19px, 1.86vw, 27px); color: var(--k-ink); border-radius: 5px; transform: rotate(-1.4deg); padding: 1.1em 1em 1.3em 1.5em;
  box-shadow: 0 0 0 1px rgba(16, 32, 43, .08), 0 26px 44px -22px rgba(16, 32, 43, .45), 0 6px 14px -8px rgba(16, 32, 43, .2); }
.sl-hear::before { content: ""; position: absolute; left: 1em; top: 0; bottom: 0; width: 1px; background: var(--sl-margin); }
.sl-meter { display: flex; gap: 3px; align-items: center; height: 2em; margin-bottom: .6em; }
.sl-meter i { flex: 1; height: 100%; background: var(--sl-learning); border-radius: 2px; transform-origin: 50% 50%; }
.sl-h { position: relative; height: 1.78em; line-height: 1.78em; border-bottom: 1px solid var(--sl-rule); white-space: nowrap; }
.sl-h u { text-decoration: none; position: relative; display: inline-block; }
.sl-h u::after { content: none; }
.sl-h u i { position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--k-accent); transform-origin: 0 50%; }

/* ---------- Chapter 6: the ruled page again, at night, with an iPhone drawn on it ---------- */
.sl-nightpage { background-color: var(--sl-dark-page); position: relative;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 45px, #262F38 45px, #262F38 46px); }
.sl-nightpage::before { content: ""; position: absolute; left: calc(max(var(--k-gutter), (100vw - var(--k-max)) / 2 + var(--k-gutter)) - 20px); top: 0; bottom: 0; width: 1px; background: #6B4750; }
.sl-nightpage .k-h2 { color: #E8EBEE; }
.sl-nightpage .k-body { color: #A3AEB8; }
.sl-vault-wrap { display: flex; align-items: flex-end; justify-content: center; position: relative; }
.sl-vault { position: relative; width: clamp(250px, 23vw, 320px); aspect-ratio: 300 / 580; padding: 16% 7.5% 8%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; flex: none; background: var(--sl-dark-page); border-radius: 15% / 8%; }
.sl-outline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sl-outline rect { fill: none; stroke: #A9A6D6; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.sl-outline .sl-isle { fill: #A9A6D6; stroke: none; }
.sl-vr { position: relative; padding: .62em 0 .5em; border-bottom: 1px solid #262F38; font-family: var(--k-display); color: #E8EBEE; font-size: clamp(17px, 1.42vw, 21px); line-height: 1.15; }
.sl-vr b { font-weight: 400; display: block; }
.sl-vr span { display: block; font: 400 .68em/1.3 var(--k-text); color: #A3AEB8; margin-top: .22em; }
.sl-vr-out b { font-weight: 700; color: #A9A6D6; }
.sl-out { position: absolute; left: calc(100% - 8%); bottom: calc(4.1% - 16px); width: clamp(150px, 15vw, 210px); font: 400 15px/1.35 var(--k-text); color: #A3AEB8; z-index: 1; }
.sl-out-t { padding-left: 11%; margin-top: 4px; }
.sl-out svg { display: block; overflow: visible; }
.sl-out .sl-arrow-a { width: 100%; height: 22px; }
.sl-out .sl-arrow-d { display: none; width: 22px; height: 56px; margin: 0 auto; }
.sl-out path { fill: none; stroke: #EC5A50; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Strips: a scene's moment on a phone ---------- */
.k-strip.sl-s { font-family: var(--k-display); font-size: 16px; color: var(--k-ink); gap: 4px 10px; line-height: 1.3; }
.sl-s > span { position: relative; padding-bottom: 3px; }
.sl-s > span > i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--k-accent); transform-origin: 0 50%; }
.sl-prog { flex: 0 0 100%; height: 3px; padding: 0 !important; background: var(--sl-rule); }
.sl-say-row { flex: 0 0 100%; padding-top: 2px; }
.sl-meter-s { flex: 0 0 100%; height: 20px; margin: 0 0 2px; padding: 0 !important; }
.sl-s .sl-meter-s i { position: static !important; flex: 1; height: 20px; background: var(--sl-learning); border-radius: 2px; }
.sl-sdeck { font: 400 13.5px/1.3 var(--k-text); color: var(--k-ink-2); flex: 0 0 100%; order: 3; }
.sl-sw { position: absolute !important; }
.sl-s-start { position: relative; }
.k-device-screen img.sl-held-bar { z-index: 2; clip-path: inset(0 0 93.6% 0); transition: opacity .45s ease; }
.k-scene[data-step="1"] .k-device-screen img.sl-held-bar { opacity: 1; }

/* ---------- Scene grounds and the tiles' pictures ---------- */
.k-tile-art { font-family: var(--k-display); }
.sl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; }
.sl-chips span { font: 400 16px/1 var(--k-display); padding: 8px 12px; border-radius: 999px; background: var(--sl-cover); color: var(--sl-cover-ink); }
.sl-csv { -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); margin-top: auto; padding: 14px 16px; border-radius: 14px; background: var(--sl-dark-page); color: #E8EBEE; font: 400 clamp(12px, 1vw, 14px)/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; overflow: hidden; white-space: nowrap; }
.sl-csv b { font-weight: 400; color: #A9A6D6; }
.sl-levels { margin-top: auto; display: grid; position: relative; }
.sl-levels div { display: flex; justify-content: space-between; align-items: baseline; font: 400 19px/2 var(--k-display); height: 38px; box-sizing: border-box; border-top: 1px solid var(--sl-rule); }
.sl-levels div:nth-child(3) { border-bottom: 1px solid var(--sl-rule); }
.sl-levels span { font: 400 15px/1 var(--k-text); color: var(--k-ink-2); }
.sl-lv-mark { position: absolute; left: 0; width: 5em; top: 0; height: 38px; pointer-events: none; }
.sl-lv-mark::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--k-accent); }
.sl-lv-w { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; font: 400 18px/1.4 var(--k-display); color: var(--k-ink); }
.sl-lv-w span { position: relative; }
.sl-lv-w i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--k-accent); transform-origin: 0 50%; }
.k-tile p.sl-keep, .k-tile p.sl-samples { margin-top: auto !important; padding-top: 10px; font: 400 16px/1.45 var(--k-text); color: var(--k-accent); }
.k-tile p.sl-samples { font: 400 18px/1.4 var(--k-display); color: var(--k-ink); }
@media (min-width: 900px) {
  .sl-keep i, .sl-samples i { display: none; }
  .sl-keep span, .sl-samples span { display: block; border-top: 1px solid var(--sl-rule); padding: 7px 0; }
  .sl-keep span:last-of-type, .sl-samples span:last-of-type { border-bottom: 1px solid var(--sl-rule); }
}
.sl-keep i, .sl-samples i { font-style: normal; }
.sl-keep .is-red { color: #B3261E; }
.k-tile { box-shadow: 0 0 0 1px var(--k-line); }
.k-tile.k-wide .sl-csv { margin-top: 20px; }

/* ---------- The rest ---------- */
.sl-tint { background: #E9F0F5; }
.sl-tint .k-teaser li { box-shadow: none; }
.sl-more-link { display: inline-flex; margin-top: 22px; }
.k-serialect .k-plan.k-plus { background: var(--sl-night); color: var(--sl-night-ink); }
.k-serialect .k-plan.k-plus .k-plan-price { color: #fff; }
.k-serialect .k-plan.k-plus li::before { border-color: #A9A6D6; }
.k-serialect .k-plan .k-h3 { margin-bottom: 4px; }
.sl-plan-note { margin-top: 16px; font-size: 15px; line-height: 1.45; color: var(--k-ink-2); max-width: 70ch; }
.k-serialect .k-faq details p { max-width: 66ch; }
.sl-close { background: var(--sl-cover); text-align: center; color: var(--sl-cover-ink); }
.sl-close .k-lockup b { color: var(--sl-cover-ink); }
.sl-close .k-lockup span { color: var(--sl-cover-ink-2); }
.sl-close .k-lockup { text-align: left; }
.sl-close .k-subnav { justify-content: center; margin-top: 32px; }
.sl-close .k-subnav a, .k-sub-hero .k-subnav a { color: var(--sl-cover-ink); box-shadow: inset 0 0 0 1.5px rgba(16, 32, 43, .5); }
.sl-close .k-subnav a[aria-current="page"], .k-sub-hero .k-subnav a[aria-current="page"] { background: var(--sl-cover-ink); color: #fff; box-shadow: none; }
.sl-close .k-soon { color: var(--sl-cover-ink); }
.sl-close .k-soon::before { background: var(--sl-cover-ink); box-shadow: 0 0 0 3px rgba(16, 32, 43, .18); }

/* ---------- Child pages: the same cover over the same white page ---------- */
.k-serialect .k-sub-hero { background: var(--sl-cover); border-radius: 0; padding-bottom: 72px; }
.k-serialect .k-sub-hero .k-lead { color: var(--sl-cover-ink-2); }
.k-serialect .k-sub-hero .k-lockup b { color: var(--sl-cover-ink); }
.k-serialect .k-sub-hero .k-lockup span { color: var(--sl-cover-ink-2); }
.k-serialect .k-doc { position: relative; background: #fff; border-radius: 26px 26px 0 0; margin-top: -26px; }
.k-serialect .k-sub-hero .k-standout { background: #fff; box-shadow: none; color: var(--k-ink); max-width: 40ch; font-family: var(--k-display); font-weight: 700; border-radius: 14px; }
.k-serialect .k-sub-hero .k-standout > span { font-family: var(--k-text); }
.k-serialect .k-doc .k-price-note { background: #E9F0F5; }
.k-serialect .k-doc { overflow-wrap: anywhere; }
.k-doc .sl-sample { max-width: 760px; font: 400 clamp(20px, 1.7vw, 24px)/1.6 var(--k-display); color: var(--k-ink); padding: 2px 0 2px 18px; box-shadow: inset 1px 0 0 var(--sl-margin); }
.k-doc .sl-sample u { text-decoration: underline; text-decoration-color: var(--k-accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.k-serialect .k-doc .k-wrap > h2:first-child, .k-serialect .k-doc .k-updated + h2 { margin-top: 28px; }

/* ---------- Phones ---------- */
@media (max-width: 899px) {
  .k-band.sl-tall { min-height: 0; }
  .sl-book, .sl-note, .sl-hear { display: none; }
  .sl-visual-book, .sl-visual-notes { justify-content: center; }
  .sl-fix { --u: clamp(21px, 6.2vw, 34px); padding: .8em .7em 1em 1.9em; border-radius: 22px; }
  .sl-fix::before { left: 1.35em; }
  .sl-season { font-size: clamp(16px, 4.6vw, 21px); }
  .sl-vault { width: min(70vw, 280px); }
  .sl-vault-wrap { padding-bottom: 104px; }
  .sl-out { left: 50%; bottom: auto; top: calc(100% - 8px); width: 220px; margin-left: -110px; text-align: center; }
  .sl-out-t { padding-left: 0; margin-top: 8px; }
  .sl-out .sl-arrow-a { display: none; }
  .sl-out .sl-arrow-d { display: block; }
  .sl-nightpage::before { left: 12px; }
  .sl-csv { font-size: 11.5px; padding: 12px; }
  .k-tiles { margin-top: 36px; }
}

/* Without motion everything is as finished */
@media (prefers-reduced-motion: reduce) {
  .sl-page u::after { transition: none; }
}