/* slopware 101: the tree, the reading page and the basket. The garden's palette and header;
   the reading page is plain text on the page, colour stays in the drawings. */
:root {
  --bg: #0b0b0c; --ink: #ededef; --ink2: #a0a0a8; --ink3: #7a7a82;
  --leaf: #8ed38a; --leaf2: #5fae6e; --bark: #b38b6d; --apple: #ff8a7a; --pale: #9a917f; --pink: #f5a3c0;
  --grass: #71c27a; --grass2: #3f7d50; --light: #ffd76a; --fence: #7a6a5c; --hair: #b8743f;
  --panel: #161618; --line: #5a5a66;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;
  --pad: max(5vw, calc((100% - 1600px) / 2));
  --tree: 19px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 18px/1.7 var(--sans); overflow-x: hidden; }
/* no underlines, like the dewguard site: grey that turns white, the links inside the lesson text too */
a { color: inherit; text-decoration: none; }
a:hover { color: var(--ink); }
.text a { color: var(--ink2); }
.text a:hover, .text a:focus-visible { color: var(--ink); }
h1, h2, p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--light); outline-offset: 4px; }
pre { margin: 0; }
.leaf { color: var(--leaf); } .leaf2 { color: var(--leaf2); } .bark { color: var(--bark); }
.grass { color: var(--grass); } .grass2 { color: var(--grass2); }
.fence { color: var(--fence); } .hair { color: var(--hair); }
/* the bark's own tones, darkest first, as the first screen's trunk has them */
.b0 { color: rgb(61, 49, 41); } .b1 { color: rgb(87, 69, 56); } .b2 { color: rgb(112, 88, 70); } .b3 { color: rgb(137, 107, 85); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* header: header.css, the garden's own */

/* *-*-*-*-*-*-*-*-*-*-*-* the tree *-*-*-*-*-*-*-*-*-*-*-* */
/* the tree on the left on its grass, the book on the right (the prototype, 5 Nov) */
.orchard { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: 1fr auto;
  column-gap: clamp(32px, 5vw, 96px); padding: 0 var(--pad); min-height: calc(100svh - 72px); overflow: hidden; }
.tree-side { grid-column: 1; grid-row: 1; align-self: end; padding-top: 16px; container-type: inline-size; }
.tree { position: relative; font: var(--tree)/1.16 var(--mono); width: calc(var(--cols) * 1ch); margin: 0 auto; }
/* a letter cell is .6 of the letter size wide and 1.16 tall, as on the first screen; the tree takes the
   width its column gives it and the height the window gives it, never more than 13px a letter */
.tree-side .tree { --tree: min(13px, calc(100cqw / (var(--cols) * .61)), calc((100svh - 150px) / (var(--rows) * 1.16))); }
.tree pre { font: inherit; white-space: pre; user-select: none; text-align: left; }   /* a drawing: every row starts at column 0 */
.book-side { grid-column: 2; grid-row: 1; align-self: center; padding: 24px 0; max-width: 580px; }
.book-side h1 { font-size: 40px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.lede { color: var(--ink2); margin-top: 14px; }
.by { font-size: 15px; color: var(--ink2); margin-top: 4px; }
.opening { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 15px; color: var(--ink2); }
.opening a:hover { color: var(--ink); }

/* how far the reader is: a bar that fills and her words beside it */
.progress { display: flex; align-items: center; gap: 16px; margin-top: 30px; }
.progress .bar { flex: none; width: 220px; height: 10px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.progress .bar i { display: block; height: 100%; width: 0; background: var(--leaf2); transition: width 1.2s ease; }
.progress .prog { font-size: 18px; font-weight: 600; }

/* the lesson the tree points at: the next one, or the apple the reader clicked */
.peek { margin-top: 30px; min-height: 196px; }
.peek-label { font-size: 15px; color: var(--ink2); }
.peek h2 { font-size: 20px; font-weight: 600; line-height: 1.4; margin-top: 4px; letter-spacing: -.01em; }
.peek-go a { color: var(--ink2); }
.peek-go a:hover { color: var(--ink); }
.peek-desc { color: var(--ink2); margin-top: 8px; max-width: 52ch; }
.peek-go { margin-top: 10px; }
.peek.turn > * { animation: turn .42s cubic-bezier(.2, .8, .2, 1) both; }
.peek.turn > :nth-child(2) { animation-delay: .03s; } .peek.turn > :nth-child(3) { animation-delay: .06s; } .peek.turn > :nth-child(4) { animation-delay: .09s; }
@keyframes turn { from { opacity: 0; transform: translateY(6px); } }

/* apples: each keeps its one cell in the drawing, its letter drawn big and bold over it (Damla, 5 Nov: "elmaların
   boyutunu büyütmemiz lazım çok görünmüyor"), in the clear cells the tree leaves either side of it */
.apple { --ak: 1.8em; position: relative; display: inline-block; width: 1ch; height: 1.16em; vertical-align: top;
  text-decoration: none; color: var(--apple); transform-origin: 50% 0; transition: color 1.1s ease, text-shadow .2s ease; }
.apple > b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); font-size: var(--ak); font-weight: 700;
  line-height: 1; pointer-events: none; }
.apple.gone > b { font-size: 1em; font-weight: 400; transform: translate(-50%, -50%); }   /* in the basket: a leaf again */
.apple::after { content: ""; position: absolute; inset: -.4em -.55em; }   /* a target the size of the big letter */
body[data-apples="pale"] .apple { color: var(--pale); }
body[data-apples="blossom"] .apple { color: var(--pink); }
body .apple.next, body .apple.falling { color: var(--apple); }
body[data-apples="red"] .apple.next { animation: ready 11s ease-in-out 2s infinite; }
@keyframes ready { 0%, 91% { transform: rotate(0); } 93% { transform: rotate(-16deg); } 95.5% { transform: rotate(12deg); } 97.5% { transform: rotate(-6deg); } 100% { transform: rotate(0); } }
.apple:hover, .apple:focus-visible { text-shadow: 0 0 6px currentColor, 0 0 14px currentColor; }
body .apple.picked { color: var(--apple); }
.apple:focus-visible { outline: none; }
body .apple.gone { color: var(--leaf2); pointer-events: none; text-shadow: none; animation: none; }

/* the basket stands on the grass at the tree's foot, left of the trunk, in front (sepet sol altta) */
.foot { position: absolute; z-index: 45; bottom: 0; left: calc(var(--at, 0) * 1ch); }
.foot.walks { transition: left .9s cubic-bezier(.45, 0, .2, 1); }
.tree .basket pre { font-size: 1.1em; }   /* a little bigger than the tree's letters, its right side short of the roots */
.basket { display: block; text-align: left; line-height: 1; }
.basket pre { font: 15px/1.15 var(--mono); white-space: pre; }
.basket .heap, .basket .weave { background: var(--bg); }
.basket .weave { color: var(--bark); }
.basket .in { font-style: normal; display: inline-block; color: var(--apple); }
.basket .incoming { visibility: hidden; }
.basket:hover .weave, .basket:focus-visible .weave { text-shadow: 0 0 6px rgba(179, 139, 109, .75); }
.ghost { position: fixed; z-index: 60; pointer-events: none; text-align: center; transform-origin: 50% 100%; }

.orchard > .grass-row { grid-column: 1 / -1; grid-row: 2; width: 100vw; margin-left: calc(50% - 50vw); font: 15px/1.3 var(--mono);
  white-space: pre; overflow: hidden; user-select: none; contain: inline-size; text-align: left; }

/* *-*-*-*-*-*-*-*-*-*-*-* a step: the tree on the left, the text in the middle, the basket and every step on the right *-*-*-*-*-*-*-*-*-*-*-* */
/* Damla, 5 Nov: "ağacı büyütelim bu sahnedeki", "bölümler ne görünmüyor, yan çok boş". Both sides stay in sight
   while the text scrolls, each as tall as the window under the menu: the tree stands in the whole height of its
   side, the basket's side holds the basket, how far the reader is and every step under them */
.leaves { --head: 68px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, clamp(500px, calc(100vw - 880px), 600px)) minmax(0, 1fr);
  column-gap: clamp(24px, 2.4vw, 40px); padding: 0 clamp(16px, 1.6vw, 28px); }
.reading { grid-column: 2; grid-row: 1; position: relative; z-index: 1; min-width: 0; padding: 28px 0 180px; }
.side { grid-row: 1; position: relative; min-width: 0; }
.side-tree { grid-column: 1; container-type: inline-size; }
.side-basket { grid-column: 3; }
.side .stick { position: sticky; top: var(--head); height: calc(100svh - var(--head)); }
.side-tree .stick { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 14px 0 12px; }
.tree.small { --tree: min(15px, calc(100cqw / (var(--cols) * .62)), calc((100svh - var(--head) - 34px) / (var(--rows) * 1.16))); margin: 0; }
.side-basket .stick { display: flex; flex-direction: column; gap: 16px; padding: 22px 0 14px; }
/* the basket with the bee beside it and the sun over them, on the ground of the basket's side */
.sky-row { position: relative; display: flex; align-items: flex-end; gap: 6px 22px; }
.sky-row .s-side { margin-left: auto; align-self: flex-start; }
@media (min-width: 900px) { .side .sky-row .bee { position: absolute; left: 152px; bottom: 16px; margin: 0; } }   /* between the basket and the sun */
.side-basket .progress { margin: 0; gap: 12px; }
.progress .prog { white-space: nowrap; }
.side-basket .progress .bar { width: 120px; }
.side-basket .progress .prog { font-size: 15px; }
/* every step: as long as the side is, it scrolls on its own, the page never moves */
.steps { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-right: -10px; padding: 4px 10px 18px 0;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 10px, #000 calc(100% - 28px), transparent); }
.crumb { font-size: 15px; color: var(--ink2); margin-bottom: 28px; }
.crumb a:hover { color: var(--ink); }
.text h1 { font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; margin-bottom: 30px; }
.text h2 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; margin: 48px 0 14px; scroll-margin-top: 24px; }
.text p, .text ul, .text ol, .text pre, .text table, .text blockquote { margin: 0 0 22px; }
.text ul, .text ol { padding-left: 24px; }
.text li { margin: 6px 0; }
.text li > p { margin: 0; }
.text code { font: 15px/1 var(--mono); }
.text pre { font: 15px/1.65 var(--mono); white-space: pre; overflow-x: auto; padding: 2px 0 2px 24px; }
.text pre code { font: inherit; }
.text blockquote { padding-left: 24px; color: var(--ink2); }
.text blockquote p { margin: 0; }
.text table { border-collapse: collapse; display: block; overflow-x: auto; }
.text th, .text td { text-align: left; vertical-align: top; padding: 4px 32px 8px 0; }
.text th { font-weight: 600; }
.text strong { font-weight: 600; }
.text::selection, .text *::selection { background: rgba(237, 237, 239, .22); }

/* a kept passage stays marked; clicking it opens the note again */
mark.note { background: rgba(237, 237, 239, .1); color: inherit; border-radius: 2px; cursor: pointer;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background .3s ease; }
mark.note:hover, mark.note.open { background: rgba(237, 237, 239, .2); }
mark.note.found { animation: found 2.2s ease; }
@keyframes found { 0%, 40% { background: rgba(255, 215, 106, .28); } }

/* while a note is open on a wide screen it sits next to the passage, where the basket was; the basket steps aside */
.note-pane { position: absolute; left: calc(100% + clamp(28px, 3vw, 56px)); width: 300px; opacity: 0; transform: translateX(28px);
  transition: opacity .45s ease .1s, transform .55s cubic-bezier(.2, .8, .2, 1) .05s; }
.note-pane.shown { opacity: 1; transform: none; }
.np-q { font-size: 15px; line-height: 1.55; color: var(--ink2); }
.np-q::before { content: "“"; } .np-q::after { content: "”"; }
.note-pane textarea { display: block; width: 100%; margin-top: 12px; resize: none; overflow: hidden; background: transparent; border: 0; padding: 0;
  color: var(--ink); font: 15px/1.6 var(--sans); caret-color: var(--light); }
.note-pane textarea::placeholder { color: var(--ink3); }
.note-pane textarea:focus { outline: none; }
.np-do { display: flex; gap: 22px; margin-top: 12px; font-size: 15px; color: var(--ink2); }
.np-do button:hover { color: var(--ink); }
.keep-chip { position: fixed; left: 50%; bottom: 22px; z-index: 55; transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  background: #1d1d20; color: var(--ink); font-size: 15px; padding: 10px 18px; border-radius: 999px;
  transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1); }
.keep-chip span { font-family: var(--mono); color: var(--apple); }
.keep-chip.shown { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* the end of a lesson: a small apple to drop into the basket */
.pick { display: flex; align-items: baseline; gap: 14px; margin-top: 64px; flex-wrap: wrap; }
.apple-end { display: inline-block; font: 18px/1 var(--mono); color: var(--apple); transform-origin: 50% 0; }
.pick button { color: var(--ink2); }
.pick button:hover, .pick.in button { color: var(--ink); }
.pick.in .apple-end { visibility: hidden; }
.pn { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 32px; margin-top: 44px; }
.pn a { display: block; }
.pn a span { display: block; font-size: 15px; color: var(--ink2); }
.pn a[rel=next], .pn a:last-child { text-align: right; }

body.noting .side-basket .stick > * { opacity: 0; pointer-events: none; }
/* while the steps are open the basket stays over the veil, so a second tap on it puts them back */
.rbasket { position: relative; }
body.steps-open .side-basket .stick, body.steps-open .rbasket { z-index: 45; }
.side-basket .stick > * { transition: opacity .3s ease; }

/* *-*-*-*-*-*-*-*-*-*-*-* what comes out of the basket: every step, on the left *-*-*-*-*-*-*-*-*-*-*-* */
/* the basket is the menu (Damla, 5 Nov): a tap opens the steps on the left, the read ones with their apple,
   the notes under their step; a tap on the basket again, outside, or esc puts them back */
.veil { position: fixed; inset: 0; z-index: 40; background: rgba(11, 11, 12, .6); }
.shelf { position: fixed; z-index: 50; left: var(--pad); top: 76px; width: min(460px, calc(100vw - 32px)); max-height: calc(100svh - 92px);
  overflow-y: auto; overscroll-behavior: contain; background: var(--panel); padding: 0 18px 16px; box-shadow: 0 18px 70px rgba(0, 0, 0, .7); }
.shelf[hidden], .veil[hidden] { display: none; }
.shelf-top { position: sticky; top: 0; z-index: 1; display: flex; justify-content: flex-end; background: var(--panel); margin: 0 -18px; padding: 10px 18px 4px; }
.shelf-top button { font-size: 15px; color: var(--ink2); }
.shelf-top button:hover { color: var(--ink); }
:is(.shelf, .steps) ol, :is(.shelf, .steps) ul { list-style: none; margin: 0; padding: 0; }
:is(.shelf, .steps) ol > li { display: grid; grid-template-columns: 1ch 2ch minmax(0, 1fr); column-gap: 10px; padding: 4px 0; }
:is(.shelf, .steps) .a { font-family: var(--mono); color: var(--apple); }
:is(.shelf, .steps) .num { color: var(--ink2); text-align: right; font-variant-numeric: tabular-nums; }
:is(.shelf, .steps) ol > li > a { line-height: 1.45; }
:is(.shelf, .steps) ol > li > a[aria-current] { font-weight: 600; color: var(--ink); }
:is(.shelf, .steps) ol > li.read > a { color: var(--ink2); }
:is(.shelf, .steps) ol > li > a:hover { color: var(--ink); }
:is(.shelf, .steps) .notes { grid-column: 3; margin-top: 6px; display: grid; gap: 8px; }
:is(.shelf, .steps) .notes a { display: block; font-size: 15px; line-height: 1.5; color: var(--ink2); }
:is(.shelf, .steps) .notes a:hover q { color: var(--ink); }
:is(.shelf, .steps) .notes q::before { content: "“"; } :is(.shelf, .steps) .notes q::after { content: "”"; }
:is(.shelf, .steps) .notes .c { display: block; color: var(--ink); }

.steps { font-size: 15px; }
.steps ol > li { padding: 3px 0; }
.steps ol > li > a { line-height: 1.5; color: var(--ink2); }
.steps ol > li > a:hover, .steps ol > li > a:focus-visible { color: var(--ink); }
.steps ol > li > a[aria-current] { color: var(--ink); }
:is(.shelf, .steps) li:has(> a[aria-current]) .num { color: var(--ink); font-weight: 600; }
.steps .notes a { font-size: 15px; }
/* close: a red [x] (Damla, 5 Nov: "close için kırmızı bir köşeli parantez x köşeli parantez sembolü kullan") */
button.x, .shelf-top button.x, .np-do button.x { font-family: var(--mono); font-size: 15px; color: var(--apple); letter-spacing: 0; }
button.x:hover, button.x:focus-visible, .shelf-top button.x:hover, .np-do button.x:hover { color: var(--apple); text-shadow: 0 0 6px rgba(255, 138, 122, .7); }

/* *-*-*-*-*-*-*-*-*-*-*-* narrower screens *-*-*-*-*-*-*-*-*-*-*-* */
@media (max-width: 899px) {
  /* one column, like a book's cover: the name, the tree on its grass in the first screen, then the rest of the book */
  .orchard { position: relative; display: flex; flex-direction: column; min-height: 0; padding: 4px 16px 0; }
  .book-side { display: contents; }
  .book-side > h1 { order: 1; margin-top: 12px; }
  .tree-side { order: 2; align-self: stretch; padding-top: 14px; }
  .tree-side .tree { --tree: min(13px, calc(100cqw / (var(--cols) * .61))); }
  .orchard > .grass-row { order: 3; align-self: stretch; }
  .book-side > :not(h1):not(.cloud) { order: 4; }
  .lede { margin-top: 18px; }
  .peek { min-height: 0; }
  .opening { margin-bottom: 8px; }
  .progress .bar { width: 120px; }
}
@media (max-width: 1199px) {
  /* no room for a third side: the steps come out of the basket, a note opens under its paragraph */
  .steps { display: none; }
  body.noting .side-basket .stick > * { opacity: 1; pointer-events: auto; }
  .note-pane { position: static; width: auto; display: grid; grid-template-rows: 0fr; transform: none; opacity: 0;
    transition: grid-template-rows .45s cubic-bezier(.2, .8, .2, 1), opacity .35s ease; margin: -8px 0 22px; }
  .note-pane.shown { grid-template-rows: 1fr; opacity: 1; }
  .np-in { overflow: hidden; padding-left: 20px; }
}
@media (max-width: 1199px) {
  /* a narrower window and a phone (damla, 6 nov): one column of text and over it one small block, the basket with
     how far the reader is beside it, the steps that come out of it under that, the sun at the end; the tree stays
     on the book's first page, behind the text here it would cross the words */
  .leaves { display: grid; grid-template-columns: minmax(0, 700px); grid-template-areas: "top" "main"; justify-content: center;
    column-gap: 0; padding: 0 16px; }
  .side-tree { display: none; }
  .side-basket { grid-area: top; }
  .side-basket .stick { position: static; height: auto; display: grid; grid-template-columns: auto auto 1fr;
    grid-template-areas: "basket prog sun" "basket tog sun"; align-items: center; column-gap: 18px; row-gap: 4px; padding: 18px 0 0; }
  .sky-row { display: contents; }
  .side-basket .rbasket { grid-area: basket; }
  .side-basket .rbasket .basket pre { font-size: 13px; }
  .side-basket .progress { grid-area: prog; align-self: end; }
  .side-basket .steps-t { grid-area: tog; align-self: start; }
  .side-basket .s-side { grid-area: sun; justify-self: end; margin: 0; font-size: 6px; }
  .reading { grid-area: main; padding-top: 30px; }
}
@media (max-width: 700px) {
  :root { --tree: min(17px, calc((100vw - 32px) / 38 / .61)); }
  .orchard { padding: 4px 16px 0; }
  .book-side h1 { font-size: 30px; }
  .text h1 { font-size: 26px; }
  .pn { grid-template-columns: 1fr; gap: 20px; }
  .pn a:last-child { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .note-pane, .apple, .progress .bar i { transition: none; }
  body[data-apples="red"] .apple.next { animation: none; }
}

/* *-*-*-*-*-*-*-*-*-*-*-* embedded in the choice page: the tree and its basket only *-*-*-*-*-*-*-*-*-*-*-* */
.embed header.site, .embed .book-side h1, .embed .lede, .embed .by, .embed .opening { display: none; }
.embed { --tree: min(15.5px, calc((100vw - 24px) / 38 / .61)); }
.embed .orchard { display: flex; flex-direction: column; align-items: center; min-height: 0; padding: 8px 12px 0; text-align: center; }
.embed .book-side { display: contents; }
.embed .tree-side { order: 1; padding-top: 0; }
.embed .orchard > .grass-row { order: 2; align-self: stretch; }
.embed .peek { order: 3; margin-top: 12px; min-height: 0; }
.embed .peek h2 { font-size: 17px; }
.embed .peek-go { display: none; }
.embed .peek-desc { display: none; }

/* the choice page itself */
body.choice { padding: 16px var(--pad); }
.looks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.look h2 { font-size: 20px; font-weight: 600; }
.look iframe { display: block; width: 100%; height: 570px; border: 0; margin-top: 4px; }
.look .say { font-size: 15px; color: var(--ink2); line-height: 1.5; margin-top: 8px; }
.look-go { display: flex; gap: 22px; font-size: 15px; margin-top: 10px; }
.look-go button { color: var(--ink2); }
.look-go button:hover { color: var(--ink); }
@media (max-width: 900px) { .looks { grid-template-columns: 1fr; } }

/* *-*-*-*-*-*-*-*-*-*-*-* the sides of a reading page: two butterflies and a few birds *-*-*-*-*-*-*-*-*-*-*-* */
/* beside the tree and around the basket, in the sides that stay in sight.
   The flight is the first dewguard garden's: a few small hops along a path, no wing turning. */
.side pre.fly, .side pre.birds, .side pre.bee { font: 13px/1.15 var(--mono); white-space: pre; user-select: none; pointer-events: none; }
.fly { animation: fly 16s steps(5, end) infinite; }
.fly-one { position: absolute; right: 8%; top: 24px; color: #e0c27b; }
.fly-two { color: var(--pink); animation-delay: -7s; }
.side .fly-two { position: absolute; left: 58%; bottom: 17%; font-size: 11px; }   /* right of the trunk, its flight never reaches the text */
.birds { color: var(--ink3); animation: drift 22s ease-in-out infinite alternate; }
.birds-one { position: absolute; left: 44%; top: -20px; }
.side .birds-two { position: absolute; left: 24%; top: 8%; font-size: 12px; animation-delay: -9s; }
@keyframes fly {
  0%, 100% { transform: translate(0, 0) rotate(-8deg); }
  25% { transform: translate(28px, -25px) rotate(7deg); }
  50% { transform: translate(55px, -8px) rotate(-6deg); }
  75% { transform: translate(20px, 14px) rotate(10deg); }
}
@keyframes drift { from { transform: translateX(-12px); } to { transform: translateX(22px); } }
@media (prefers-reduced-motion: reduce) { .fly, .birds { animation: none; } }

/* *-*-*-*-*-*-*-*-*-*-*-* the sky: the first screen's own smiling sun and its clouds *-*-*-*-*-*-*-*-*-*-*-* */
/* the sun's frames lie on top of each other and one shows at a time: its rays turn a step every 1.6 s, it blinks */
.k-light { color: var(--light); } .k-yellow { color: #f3d47a; } .k-pink { color: var(--pink); } .k-roof { color: #d98c6c; }
.k-ink { color: var(--ink); } .k-star2 { color: #d6d6e0; } .k-ink2 { color: var(--ink2); }
.k-ya { color: rgb(104, 91, 56); } .k-yb { color: rgb(75, 66, 42); } .k-yc { color: rgb(60, 54, 35); } .k-yd { color: rgb(46, 41, 29); }
pre.sun, pre.cloud { margin: 0; font-family: var(--mono); line-height: 1.16; white-space: pre; text-align: left; user-select: none; pointer-events: none; }
pre.sun { display: grid; width: max-content; }
pre.sun > .f { grid-area: 1 / 1; visibility: hidden; animation: 8s linear infinite; }
pre.sun > .f0 { animation-name: sun0; } pre.sun > .f1 { animation-name: sun1; } pre.sun > .f2 { animation-name: sun2; }
pre.sun > .f3 { animation-name: sun3; } pre.sun > .f4 { animation-name: sun4; } pre.sun > .f5 { animation-name: sun5; }
@keyframes sun0 { 0%, 19.9% { visibility: visible; } 20%, 100% { visibility: hidden; } }
@keyframes sun1 { 0%, 19.9% { visibility: hidden; } 20%, 39.9% { visibility: visible; } 40%, 100% { visibility: hidden; } }
@keyframes sun2 { 0%, 39.9% { visibility: hidden; } 40%, 53.6% { visibility: visible; } 53.7%, 56.2% { visibility: hidden; } 56.3%, 59.9% { visibility: visible; } 60%, 100% { visibility: hidden; } }
@keyframes sun5 { 0%, 53.6% { visibility: hidden; } 53.7%, 56.2% { visibility: visible; } 56.3%, 100% { visibility: hidden; } }
@keyframes sun3 { 0%, 59.9% { visibility: hidden; } 60%, 79.9% { visibility: visible; } 80%, 100% { visibility: hidden; } }
@keyframes sun4 { 0%, 79.9% { visibility: hidden; } 80%, 100% { visibility: visible; } }
pre.cloud { animation: drift 26s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) {
  pre.sun > .f { animation: none; }
  pre.sun > .f0 { visibility: visible; }
  pre.cloud { animation: none; }
}
/* on the book's first page: the sun at the top right of the tree, where its crown leaves the sky open, a small cloud
   at its top left, a long one over the book's name; all in the tree's own letters, so they grow and shrink with it */
.tree > .s-tree { position: absolute; z-index: 2; right: 0; top: -3em; font-size: .55em; }   /* over the open sky right of the crown's top */
.tree > .c-tree { position: absolute; z-index: 2; left: 0; top: -.2em; font-size: 1em; }
.book-side { position: relative; }
.book-side > .c-book { position: absolute; right: 0; bottom: calc(100% - 6px); font-size: 11px; }
/* on a reading page: the sun beside the basket, a cloud at the top of the tree's side */
.side-basket .s-side { font-size: clamp(6.5px, .56vw, 8px); }
.side-tree .c-side { position: absolute; z-index: 2; left: 0; top: 10px; font-size: 11px; }
@media (max-width: 899px) {
  /* a phone: the long cloud beside the book's name, the sun a little smaller and lower, so the two never meet */
  .book-side > .c-book { right: 16px; top: 4px; bottom: auto; font-size: 9px; }
  .tree > .s-tree { font-size: .5em; top: -1.6em; }
}
@media (max-width: 700px) {
  .side-basket .progress .bar { width: 80px; }
  .side-basket .stick { column-gap: 12px; }
  .side-basket .rbasket .basket pre { font-size: 11px; }
  .side-basket .s-side { font-size: 4.5px; }
  .steps-t { white-space: nowrap; }
}

/* *-*-*-*-*-*-*-*-*-*-*-* the bee: under the basket on a reading page, and next to the tree on wide screens *-*-*-*-*-*-*-*-*-*-*-* */
.bee { color: var(--light); animation: buzz 12s steps(6, end) infinite; pointer-events: none; }
.bee .wing { color: var(--ink2); }
.side .bee { margin: 0 0 12px; animation-delay: -4s; }
/* on the book's first page the bee keeps to the tree's own open ground, right of the trunk, never over the book */
.tree > .bee { position: absolute; left: 72%; top: 76%; font: 15px/1.15 var(--mono); white-space: pre; user-select: none; display: none; }
@keyframes buzz {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(14px, -6px); }
  40% { transform: translate(26px, 4px); }
  60% { transform: translate(12px, 10px); }
  80% { transform: translate(-4px, 2px); }
}
@media (min-width: 760px) { body:not(.embed) .tree > .bee { display: block; } }
@media (prefers-reduced-motion: reduce) { .bee { animation: none; } }

/* *-*-*-*-*-*-*-*-*-*-*-* a finger's room on a phone *-*-*-*-*-*-*-*-*-*-*-* */
/* the small words answer a 44 px square round them and nothing on the page moves; an apple answers a 40 px square,
   and where two squares meet book.js gives the tap to the apple nearest to it */
@media (max-width: 700px) {
  .crumb a, .peek-go a, .opening a, .by a, .pick .drop, .shelf-top button, .np-do button { position: relative; }
  .crumb a::after, .peek-go a::after, .opening a::after, .by a::after, .pick .drop::after, .shelf-top button::after, .np-do button::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
}
@media (pointer: coarse) {
  .apple::after { inset: -15px -18px; }
}

/* *-*-*-*-*-*-*-*-*-*-*-* a step: the text first (damla, 6 nov) *-*-*-*-*-*-*-*-*-*-*-* */
/* her words, in order: "ekran tam 3 bölüm boyutları eşit, o çirkin duruyor ... en önemlisi yazının kendisi";
   "yazının kapladığı yeri büyüt"; "ön sonra komutları da sağ ve sol kolonda yazının üstünde değil ... yazı
   başlığının ise tamamı aynı font ve renkte"; "ağaç sepet metaforunu bırakalım"; "prev next ikisini de merkeze biraz
   yaklaştır, çevreyi güzelleştir süsle ... çiçekleri ... ördekler"; "all the chapters yaz, açılsın, read olanların
   üstü yeşil çizilir"; "üst değil solda olsun". The text is the widest column and the biggest letter. On the left,
   by the text, the previous step, then all the chapters that open under it, flowers at the foot; on the right, by
   the text, the next step, the sun, the ducks' pond at the foot. Nothing beside the text moves */
body.piece { font-size: 19px; }
.leaves { grid-template-columns: minmax(0, 1fr) minmax(0, 780px) minmax(0, 1fr); }
.side-tree .tree, .side-basket .rbasket, .side-basket .progress, .side .fly, .side .birds, .side .bee { display: none; }
pre.cloud { animation: none; }

/* over the title one line: the book and read */
.topline { display: flex; align-items: baseline; gap: 26px; font-size: 15px; margin-bottom: 26px; }
.topline .book { color: var(--ink3); }
.topline .book:hover, .topline .book:focus-visible { color: var(--ink); }
.topline .pick { margin: 0; }
/* read: the word turns green once the step is read */
.pick.in button, .pick.in button:hover { color: var(--leaf); }

/* the title all one letter and one colour, its number too; never a dot between them (damla: "asla yan nokta") */
.n { color: inherit; font-weight: inherit; }
.text h1 { font-size: 34px; }

/* the steps either side: grey, each with its word over its name; once read, the next one is white */
.pn a, .side-pn { color: var(--ink2); }
.pn a span.n, .side-pn span.n { display: inline; font-size: inherit; margin: 0; }
.pn a:hover, .pn a:focus-visible, .side-pn:hover, .side-pn:focus-visible, body.done .pn a[rel=next], body.done .side-pn[rel=next] { color: var(--ink); }
.side-pn { display: block; font-size: 16px; line-height: 1.45; max-width: 250px; }
.side-pn > span:first-child { display: block; font-size: 15px; color: var(--ink3); margin-bottom: 2px; }

/* the sides stay in sight, each as tall as the window; their words keep close to the text */
.side .stick { display: flex; flex-direction: column; gap: 0; padding: 30px 0 0; }
.side-tree .stick { align-items: flex-end; text-align: right; }
.side-basket .stick { align-items: flex-start; text-align: left; }
.side-tree .side-pn, .side-basket .side-pn { margin: 0; }
.side-basket .sky-row { order: 2; margin-top: 30px; display: block; }
.side-basket .sky-row .s-side { margin: 0; }
.side-basket .steps-t, .side-basket .steps { display: none; }

/* all the chapters: under the previous step; open, every step under it, a read one struck through in green */
.steps-t { display: block; margin-top: 34px; font-size: 16px; color: var(--ink2); text-align: right; }
.steps-t .cnt { margin-left: 12px; color: var(--ink3); font-size: 15px; }
.steps-t:hover, .steps-t:focus-visible, .steps-t[aria-expanded=true] { color: var(--ink); }
.side-tree .steps { width: min(100%, 320px); margin: 12px 0 0; padding: 4px 10px 18px 0; text-align: left; flex: 0 1 auto;
  max-height: calc(100svh - 330px); transition: max-height .5s cubic-bezier(.2, .8, .2, 1), opacity .35s ease; }
.side-tree .stick.folded .steps { max-height: 0; opacity: 0; visibility: hidden; padding-bottom: 0; }
.steps ol > li { grid-template-columns: 2ch minmax(0, 1fr); }
.steps .a { display: none; }
/* a kept note sits under its step's name, in the name's column */
.steps .notes { grid-column: 2; }
.steps ol > li.read > a { color: var(--ink3); text-decoration: line-through; text-decoration-color: var(--leaf); text-decoration-thickness: 2px; }
@media (prefers-reduced-motion: reduce) { .side-tree .steps { transition: none; } }

/* a step still to come: its name in grey, no page yet (her contents page: "coming soon") */
.steps li.soon .t, .toc li.soon .t { color: var(--ink3); }
.cs { margin-left: 10px; font-size: 14px; font-style: italic; color: var(--ink3); white-space: nowrap; }

/* a book's cover: her book's name and hers, a few words of the preface, every step, a read one struck through */
.book-cover h1 { font-size: 44px; letter-spacing: -.03em; line-height: 1.1; margin: 24px 0 0; }
.book-cover .by { font-size: 16px; color: var(--ink2); margin: 10px 0 0; }
.book-cover .lede { color: var(--ink2); margin: 30px 0 0; }
.text .toc { list-style: none; margin: 34px 0 0; padding: 0; }
.toc > li { display: grid; grid-template-columns: 2.4ch minmax(0, 1fr); column-gap: 10px; padding: 5px 0; }
.toc .num { color: var(--ink3); text-align: right; font-variant-numeric: tabular-nums; }
.toc .a { display: none; }
.toc a { color: var(--ink); }
.toc a:hover, .toc a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.toc li.read a { color: var(--ink3); text-decoration: line-through; text-decoration-color: var(--leaf); text-decoration-thickness: 2px; }
.book-cover .start { margin: 34px 0 0; }
.book-cover .start a { color: var(--ink2); }
.book-cover .start a:hover, .book-cover .start a:focus-visible { color: var(--ink); }

/* the garden's still drawings at the foot of each side, the cloud over the left one */
.decor { order: 9; font: 13px/1.15 var(--mono); white-space: pre; user-select: none; pointer-events: none; margin: auto 0 18px; }
.side-tree .decor { align-self: flex-start; }
.side-tree .c-side { position: static; order: -1; align-self: flex-start; margin: -12px 0 12px 8px; font-size: 11px; }
.d-leaf { color: var(--leaf); } .d-leaf2 { color: var(--leaf2); } .d-apple { color: var(--apple); } .d-roof { color: #d98c6c; }
.d-yellow { color: #f3d47a; } .d-pink { color: var(--pink); } .d-sky { color: #8ec5ff; } .d-water { color: #5c8fb8; }
.d-owl { color: #d8c4a2; } .d-ink { color: var(--ink); } .d-ink2 { color: var(--ink2); } .d-grass { color: var(--grass); } .d-bark { color: var(--bark); }

/* a narrower window and a phone: the text alone in its column, all the chapters over it, the steps at its end */
@media (max-width: 1199px) {
  .leaves { grid-template-columns: minmax(0, 760px); grid-template-areas: "top" "main"; }
  .side-tree { display: block; grid-area: top; position: static; }
  .side-tree .stick { position: static; height: auto; padding: 18px 0 0; align-items: flex-start; text-align: left; }
  .side-tree .side-pn, .side-tree .c-side, .side .decor, .side-basket { display: none; }
  .steps-t { margin-top: 0; text-align: left; }
  .side-tree .steps { display: block; width: 100%; max-height: 60svh; }
}