/* jean.is's page under the app's first screen (D397), which site/home/page.js writes there: the app's own
   tokens and buttons, in Tilde as a first visit has it, any other look's where it differs. Logical
   properties only; classes start with home-. */

/* Shown once the app is ready, which has taken it away by then unless this is a first visit in a tab or the address
   asks for it, ?index=1 (ui/home.js); without scripts, as it is written. Never printed. */
@media (scripting: enabled) { :root:not(.is-ready) body > .home { display: none; } }
@media print { body > .home { display: none; } }

/* The page rises into the first screen as a sheet, over the room the box's ideas leave free under them (--home-lift,
   which ui/home.js measures, D653): the room is as it is without the page, its box where it always is, and the page's
   promise and who it is for show under it, cut by the window's edge, so it reads as going on. The links under the box,
   which the page's foot has too, are under the sheet, and out of the keyboard's way. */
body > .home { margin-block-start: calc(-1 * var(--home-lift, 0px)); }
body:has(> .home:not([hidden])) app-composer > :is(p, footer) { visibility: hidden; }

/* Once the drawer is open beside the room, as it is after a first request, the page sits beside it too, brought into
   view under the main area's top. The drawer is at the app's inline start, which is the
   page's inline end when the app speaks a language that has no page and reads the other way (Hebrew, over English's).
   The drawer stays where it is however far down the page is read: sticky in the app's shell, whose content reaches
   over the page by its height (--home, ui/home.js), less what rises into the room, and takes no room for it, its
   margin and the page's collapsing into the larger; the box and the main area's top end stay put, and
   ui/composer.js leaves that reach out of the room's height. */
@media (min-width: 48rem) {
  :root[data-sidebar] body > .home { margin-inline-start: var(--list); scroll-margin-block-start: var(--top); }
  :root[data-sidebar][dir='rtl'] body > .home[dir='ltr'], :root[data-sidebar][dir='ltr'] body > .home[dir='rtl'] { margin-inline: 0 var(--list); }
  :root[data-sidebar] body:has(> .home:not([hidden])) > app-shell { --reach: calc(var(--home, 0px) - var(--home-lift, 0px)); min-block-size: calc(100dvh + var(--reach)); margin-block-end: calc(-1 * var(--home, 0px)); }
  :root[data-sidebar] body:has(> .home:not([hidden])) > app-shell::after { content: ''; flex: none; block-size: var(--reach); }
  :root[data-sidebar] body:has(> .home:not([hidden])) > app-shell > :is(.views, app-composer) { position: relative; }
}

/* While the page shows, it is the main content, its own <main> (ui/home.js), and the app's room holds the first screen in a
   <div class="main"> (ui/shell.js), drawn as the app draws its <main>, in every look; the page's <main> is never drawn so. */
:root body > .home[lang] > main { display: block; inline-size: auto; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; view-transition-name: none; }
:where(.here) > .main { flex: 1; display: flex; flex-direction: column; inline-size: var(--column); margin-inline: auto; padding-block-end: 2rem; }
:where(:root[data-sidebar] .here) > .main { padding-block-start: 1.5rem; }
:where(:root[data-sidebar] app-shell:has(> .views button) .here, :root:is([data-look='human'], [data-look='tilde'])[data-sidebar] .here) > .main { padding-block-start: 0; }
:where(:root[data-look='classic'] .here) > .main { margin-block: 0.75rem; padding: 2.4rem 1.25rem 1.25rem; background: var(--title) 3px 3px / calc(100% - 6px) 1.6rem no-repeat, var(--room); box-shadow: var(--raised); }
:where(:root[data-look='notebook'][data-theme='light'] .here) > .main { padding-inline-start: 1rem; border-inline-start: 2px solid var(--margin); }
:where(:root[data-split] .here) > .main { padding-block-start: 1rem; }
:where(:root[data-sliding] .here) > .main { view-transition-name: page; }

.home {
  --home-side: var(--side, var(--room-2));
  --home-fill: var(--fill, var(--ink));
  --home-on-fill: var(--on-fill, var(--room));
  --home-control: var(--control, oklch(from var(--ink) l c h / 0.08));
  --home-raise: var(--raise, 0 0 0 1px var(--line-strong));
  --home-float: var(--float, 0 1.25rem 3.5rem -0.75rem oklch(0 0 0 / 0.45));
  --home-pane: 1.25rem;
  --home-sheet: 1.75rem;
  --home-menu: 0.75rem;
  --home-row: 0.625rem;
  --home-gutter: clamp(1.25rem, 8vw, 7.5rem);
  /* A section's or the foot's sides: the gutter, or wider so what they hold is at most 75rem, centred. */
  --home-edge: max(var(--home-gutter), (100% - 75rem) / 2);
  position: relative;
  background: var(--room);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.6;
}
/* Weightless, so every class of the page's own spaces its element as it says. */
:where(.home) :where(h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset) { margin: 0; }
:where(.home) :where(ul, ol) { padding: 0; list-style: none; }
.home a { color: var(--flame); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.home a.button { color: var(--ink); text-decoration: none; }
.home :is(h1, h2, h3, .home-why, .home-sub, .home-promise-sub, .home-door-why) { text-wrap: balance; }
.home:lang(ja) { line-break: strict; }
.home:lang(ja) :is(h1, h2, h3, p) { word-break: auto-phrase; }
.home:lang(ko) { word-break: keep-all; }
.home .flip-rtl { display: inline-block; }
.home .icon { flex: none; }

/* What Jean is, the page's own heading, then "Jean for you": who it is for, in one band on the fold, the top of a
   sheet over the room, its corners round and a shadow above it, which rises into place as the page shows. */
.home-promise { padding: 2.25rem var(--home-gutter) 0; border-block-start: 1px solid var(--line); border-start-start-radius: var(--home-sheet); border-start-end-radius: var(--home-sheet); background: var(--home-side); box-shadow: 0 -1.25rem 2.5rem -1.75rem oklch(0 0 0 / 0.45); text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  :is(.home-promise, .home-promise-sub, .home-strip) { animation: home-rise 0.7s var(--ease) 0.3s backwards; }
}
@keyframes home-rise { from { translate: 0 2rem; opacity: 0; } }
.home-strip, .home-strip ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; }
.home-strip { padding: 1rem var(--home-gutter); border-block: 1px solid var(--line); background: var(--home-side); }
/* The line under it says how: any AI, and what is kept where; a language without its words yet goes straight to the strip. */
.home-promise-sub { margin: 0; padding: 0.75rem max(var(--home-gutter), calc((100% - 44rem) / 2)) 0; background: var(--home-side); color: var(--ink-soft); font-size: 1.1rem; text-align: center; }
:is(.home-promise, .home-promise-sub) + .home-strip { padding-block-end: 1.75rem; border-block-start: 0; }
.home-strip-label { margin-inline-end: 0.25rem; color: var(--ink-soft); font-size: 0.875rem; white-space: nowrap; }
.home-strip .button { padding-block: 0.3rem; font-size: 0.875rem; }

/* Sections, their colour the page's width */
.home-section { display: flex; flex-direction: column; gap: 1.75rem; padding: 4.5rem var(--home-edge); }
.home-section.is-side { background: var(--home-side); }
.home-head { display: flex; flex-direction: column; gap: 0.6rem; max-inline-size: 46rem; }
.home-head.is-centred { align-self: center; align-items: center; text-align: center; }
.home-why { color: var(--ink-soft); font-size: 1.1rem; line-height: 1.65; }
.home-title { color: var(--ink); font: 700 clamp(1.75rem, 4vw, 2.5rem)/1.15 var(--display); }
.home-title.is-small { font-size: clamp(1.5rem, 3vw, 2rem); }
.home-sub { color: var(--ink-soft); font-size: 1.1rem; }
.home:is(:lang(ar), :lang(ja), :lang(ko)) :is(.home-title, .home-door-title, .site-mark) { font-family: var(--sans); }

/* The range: the words in and out, who it's for, four tries and how one went. */
.home-formats { display: grid; gap: 0.5rem; justify-items: center; }
.home-formats > div { display: flex; align-items: baseline; justify-content: center; gap: 0.4rem; }
.home-formats dt { flex: none; min-inline-size: 3.5rem; margin-inline-end: 0.35rem; color: var(--ink-soft); font-size: 0.8125rem; font-weight: 600; text-align: end; }
.home-formats ul { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.home-formats li { padding: 0.15rem 0.7rem; border-radius: 999px; background: var(--room-2); font-size: 0.8125rem; }
.home-filter { position: relative; isolation: isolate; anchor-scope: --chosen; display: inline-flex; flex-wrap: wrap; align-self: center; gap: 0.25rem; padding: 0.2rem; border: 0; border-radius: 999px; background: var(--room-2); }
.home-filter input { position: absolute; opacity: 0; pointer-events: none; }
.home-filter label { display: block; padding: 0.3rem 0.9rem; border-radius: 999px; color: var(--ink-soft); font-size: 0.8125rem; cursor: pointer; transition: color 0.3s var(--ease); }
.home-filter input:checked + label { background: var(--home-fill); color: var(--home-on-fill); }
/* Where the browser anchors, the choice's fill is one mark under the choices that slides to the one chosen, as a segmented control's in the app (ui/dialogs.css). */
@supports (anchor-name: --chosen) {
  .home-filter input:checked + label { anchor-name: --chosen; background: none; }
  .home-filter::before { content: ''; position: absolute; z-index: -1; position-anchor: --chosen; inset-block: anchor(start) anchor(end); inset-inline: anchor(start) anchor(end); border-radius: 999px; background: var(--home-fill); transition: inset 0.35s var(--ease); }
}
.home-filter input:focus-visible + label { outline: 2px solid var(--flame); outline-offset: 2px; }
.home:has(#home-for-home:checked) .home-tile:not([data-for='home']),
.home:has(#home-for-family:checked) .home-tile:not([data-for='family']),
.home:has(#home-for-work:checked) .home-tile:not([data-for='work']) { display: none; }

/* One row, four tiles in view (two under 70rem), the rest a turn away: the buttons, in the margins, once
   ui/home.js has them turn the row, and hidden where it ends; the row scrolls without them too. Room for
   the active tile's ring, which the scrolling row would clip. */
.home-row { position: relative; }
.home-tiles { display: flex; gap: 1rem; margin: -0.3rem; padding: 0.3rem; overflow-x: auto; scroll-snap-type: inline mandatory; scroll-padding-inline: 0.3rem; scrollbar-width: none; }
@media (prefers-reduced-motion: no-preference) { .home-tiles { scroll-behavior: smooth; } }
.home-tile { display: flex; flex: 0 0 calc((100% - 3rem) / 4); flex-direction: column; gap: 0.7rem; min-block-size: 21rem; padding: 0.9rem; border: 1px solid var(--line); border-radius: var(--home-pane); background: var(--room); scroll-snap-align: start; }
.home-turn { position: absolute; z-index: 1; inset-block-start: calc(50% - 1.375rem); display: none; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: var(--home-control); box-shadow: var(--home-raise); color: var(--ink); cursor: pointer; }
.home-turn.is-back { inset-inline-start: -3.25rem; }
.home-turn.is-next { inset-inline-end: -3.25rem; }
.home-turn.is-back .icon { rotate: 180deg; }
.home-row.is-turning .home-turn:not(:disabled) { display: grid; }
.home-turn:hover { background: var(--room-2); }
.home-tile { transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.home-tile:not(.is-active) { cursor: pointer; }
.home-tile.is-active { border-color: oklch(from var(--home-fill) l c h / 0.6); box-shadow: 0 0 0 3px oklch(from var(--home-fill) l c h / 0.12); }
.home-where, .home-step, .home-door-name { color: var(--ink-soft); font-size: 0.8125rem; font-weight: 600; line-height: 1.4; }
.home-ask { font-size: 0.95rem; font-weight: 500; line-height: 1.45; }
.home-file { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.1rem 0.55rem 0.1rem 0.4rem; border-radius: 0.4375rem; background: var(--room-2); color: var(--ink); font-size: 0.8125rem; font-weight: 400; vertical-align: middle; }
.home-file .icon { inline-size: 0.95rem; block-size: 0.95rem; color: var(--flame); }
.home-go { display: flex; margin-block-start: auto; font-size: 0.8125rem; }
.home-go .button { white-space: nowrap; }

/* The tiles' pictures, drawn until each is a capture of its request done in that language. */
.home-art { position: relative; display: grid; flex: 1; place-items: center; min-block-size: 8rem; overflow: hidden; border-radius: var(--home-row); background: var(--room-2); }
.home-art svg { inline-size: 86%; block-size: auto; }
.home-art.is-map svg { inline-size: 100%; block-size: 100%; }
.home-bars { display: flex; align-items: flex-end; gap: 0.6rem; block-size: 70%; padding-block-end: 0.75rem; }
.home-bars span { display: block; inline-size: 1.6rem; border-start-start-radius: 0.3rem; border-start-end-radius: 0.3rem; background: oklch(from var(--ink) l c h / 0.18); }
.home-bars span:nth-child(1) { block-size: 46%; }
.home-bars span:nth-child(2) { block-size: 34%; }
.home-bars span:nth-child(3) { block-size: 40%; }
.home-bars span:nth-child(4) { block-size: 94%; background: var(--flame); }
.home-badge { position: absolute; inset-block-start: 0.6rem; inset-inline-end: 0.6rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--room); box-shadow: var(--home-raise); font-size: 0.75rem; }
.home-quiz { display: flex; flex-direction: column; gap: 0.4rem; inline-size: 82%; font-size: 0.8125rem; }
.home-quiz b { margin-block-end: 0.15rem; font-weight: 600; }
.home-quiz > span { padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--home-control); box-shadow: var(--home-raise); }
.home-quiz > span:nth-of-type(2) { background: var(--home-fill); color: var(--home-on-fill); box-shadow: none; }
.home-staff { stroke: var(--line-strong); stroke-width: 1.2; }
.home-note-head { fill: var(--ink); }
.home-note-stem { stroke: var(--ink); stroke-width: 1.6; }
.home-note-head.is-lit { fill: var(--flame); }
.home-note-stem.is-lit { stroke: var(--flame); }
.home-road { fill: none; stroke: var(--line-strong); stroke-width: 5; stroke-linecap: round; }
.home-route { fill: none; stroke: var(--flame); stroke-width: 3.5; stroke-linecap: round; }
.home-start { fill: var(--ink); }
.home-end { fill: var(--room); stroke: var(--ink); stroke-width: 2.5; }
.home-grid { stroke: var(--line); stroke-width: 1; }
.home-wash { fill: oklch(from var(--flame) l c h / 0.14); }
.home-wash-strong { fill: oklch(from var(--flame) l c h / 0.45); }
.home-curve { fill: none; stroke: var(--flame); stroke-width: 3; stroke-linecap: round; }
.home-water { fill: var(--flame); }
.home-soft { fill: oklch(from var(--ink) l c h / 0.16); }
.home-ink { fill: var(--ink); }
.home-ink-soft { fill: oklch(from var(--ink) l c h / 0.55); }
.home-card { fill: var(--room); stroke: var(--line-strong); stroke-width: 1; }
.home-shadow { opacity: 0.7; }
.home-box { fill: none; stroke: var(--ink-soft); stroke-width: 1.4; }
.home-tick { fill: none; stroke: var(--flame); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-bar { fill: oklch(from var(--ink) l c h / 0.28); }
.home-today { stroke: var(--flame); stroke-width: 1.4; stroke-dasharray: 3 3; }
.home-link-line { fill: none; stroke: var(--line-strong); stroke-width: 1.6; }
.home-string { fill: none; stroke: var(--ink-soft); stroke-width: 1.2; }
.home-sun { fill: oklch(from var(--flame) l c h / 0.35); }
.home-house { fill: oklch(from var(--ink) l c h / 0.22); }
.home-leaf { fill: oklch(from var(--flame) l c h / 0.3); }
.home-trunk { stroke: var(--ink-soft); stroke-width: 3; }
.home-blossom { fill: var(--room); }

/* How it went: the active tile's request, replayed. Every replay is in the page, stacked in one place so the page
   never moves as they change, the active tile's shown. */
.home-replays { display: grid; scroll-margin-block-start: 5rem; }
.home-replays > .home-replay { grid-area: 1 / 1; transition: opacity 0.25s var(--ease), visibility 0.25s; }
.home-replays > .home-replay[inert] { visibility: hidden; opacity: 0; }
.home-replay { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; padding: 1.25rem 1.4rem; border: 1px solid var(--line); border-radius: var(--home-pane); background: var(--room); }
.home-replay > li { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; min-inline-size: 0; font-size: 0.875rem; }
.home-replay > li + li { padding-inline-start: 1.25rem; border-inline-start: 1px solid var(--line); }
.home-asked { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; padding: 0.45rem 0.8rem; border-radius: var(--radius); background: var(--room-2); line-height: 1.45; }
.home-asked .home-file { background: var(--room); }
.home-ticks li { display: flex; gap: 0.4rem; align-items: baseline; }
.home-ticks li::before { content: '✓' / ''; color: var(--flame); }
.home-receipt { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 0.8rem; border-radius: var(--home-menu); background: var(--room); box-shadow: var(--home-float); font-size: 0.8125rem; }
.home-receipt b { display: flex; align-items: center; gap: 0.35rem; font-weight: 600; }
.home-receipt .icon { inline-size: 1rem; block-size: 1rem; color: var(--flame); }
.home-receipt span { color: var(--ink-soft); }
.home-replay .button { margin-block-start: auto; }

/* Why Jean: the doors, Confidential first. */
.home-doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.home-door { display: flex; flex-direction: column; gap: 0.6rem; min-inline-size: 0; min-block-size: 23.5rem; padding: 1.35rem; border: 1px solid var(--line); border-radius: var(--home-pane); background: var(--room); scroll-margin-block-start: 5rem; }
.home-door.is-featured { grid-column: span 2; border-color: var(--line-strong); }
.home-door-why { color: var(--ink-soft); font-size: 0.875rem; line-height: 1.5; }
.home-door-title { color: var(--ink); font: 700 1.4rem/1.2 var(--display); }
.home-door.is-featured .home-door-title { font-size: 1.75rem; }
.home-door-go { display: flex; flex-direction: column; gap: 0.2rem; margin-block-start: auto; font-size: 0.875rem; font-weight: 500; }
.home-door-go > * { align-self: flex-start; }
.home-door details { margin-block-start: auto; font-size: 0.875rem; }
.home-door summary { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--ink); font-weight: 500; cursor: pointer; list-style: none; }
.home-door summary::-webkit-details-marker { display: none; }
.home-door summary .icon { inline-size: 1rem; block-size: 1rem; transition: rotate 0.2s; }
.home-door details[open] summary .icon { rotate: 180deg; }
.home-door details > ul { display: flex; flex-direction: column; gap: 0.4rem; margin-block-start: 0.6rem; }
.home-note { color: var(--ink-soft); font-size: 0.8125rem; }
.home-versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.home-versus > div { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.7rem 0.85rem; border-radius: var(--home-menu); font-size: 0.875rem; }
.home-versus > div:first-child { background: var(--room-2); color: var(--ink-soft); }
.home-versus > div:last-child { border: 1.5px solid var(--home-fill); }
.home-versus dt { color: var(--ink); font-size: 0.8125rem; font-weight: 600; }

/* Personal, as in yours: the usual way and Jean's, a row for each of what it holds; a card a row on a phone. */
.home-section.is-ruled { border-block-start: 1px solid var(--line); }
.home-personal { inline-size: calc(100% + 1rem); max-inline-size: 61rem; margin-inline: -0.5rem; border-collapse: separate; border-spacing: 0.5rem 0.45rem; font-size: 0.95rem; }
.home-personal :is(th, td) { padding: 0.75rem 0.9rem; border-radius: var(--home-menu); text-align: start; vertical-align: top; }
.home-personal thead th { padding-block: 0 0.1rem; color: var(--ink-soft); font-size: 0.8125rem; font-weight: 600; }
.home-personal tbody th { inline-size: 22%; padding-inline-start: 0; color: var(--ink); font-weight: 600; }
.home-personal tbody td:nth-of-type(1) { background: var(--room-2); color: var(--ink-soft); }
.home-personal tbody td:nth-of-type(2) { border: 1.5px solid var(--home-fill); }
#home-personal .home-door-go { flex-direction: row; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.home-sealed { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem 0.55rem 0.9rem; border: 1.5px solid var(--flame); border-radius: 1.375rem; background: var(--glass); font-size: 0.8125rem; }
.home-sealed > span:first-child { flex: 1; min-inline-size: 0; color: var(--ink-faint); }
.home-sealed > span:last-child { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--flame); font-weight: 500; white-space: nowrap; }
.home-sealed .icon, .home-rows .icon { inline-size: 1rem; block-size: 1rem; color: var(--flame); }
.home-rows li, .home-people li { display: flex; align-items: center; gap: 0.6rem; padding-block: 0.4rem; border-block-end: 1px solid var(--line); font-size: 0.875rem; }
.home-rows li:last-child, .home-people li:last-child { border-block-end: 0; }
.home-people i { display: grid; flex: none; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; background: var(--room-2); font-size: 0.8125rem; font-style: normal; font-weight: 600; }
.home-people span { display: flex; flex-direction: column; min-inline-size: 0; line-height: 1.35; }
.home-people small { color: var(--ink-soft); font-size: 0.8125rem; }
.home-source { color: var(--ink-faint); font-size: 0.75rem; }
.home-offer { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.8rem 0.9rem; border: 1px solid var(--wait-line, var(--line-strong)); border-radius: var(--radius); background: var(--wait, var(--room-2)); font-size: 0.8125rem; line-height: 1.45; }
.home-offer > span { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.home-offer .button, .home-link .button { padding: 0.2rem 0.75rem; font-size: 0.8125rem; }
.home-link { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.35rem 0.35rem 0.7rem; border: 1px solid var(--line-strong); border-radius: 0.5rem; color: var(--ink-soft); font: 0.78rem/1.5 var(--mono); }
.home-link > span:first-child { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; }
.home-dots li { display: flex; gap: 0.45rem; font-size: 0.875rem; line-height: 1.45; }
.home-dots li::before { content: '·' / ''; color: var(--flame); font-weight: 700; }

/* Questions, in the words people search with. */
.home-questions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3.5rem; align-items: start; }
.home-questions > div { display: flex; flex-direction: column; min-inline-size: 0; }
.home-questions details { padding-block: 1rem; border-block-end: 1px solid var(--line); }
.home-questions summary { display: flex; justify-content: space-between; gap: 1rem; font-weight: 500; cursor: pointer; list-style: none; }
.home-questions summary::-webkit-details-marker { display: none; }
.home-questions summary .icon { inline-size: 1.1rem; block-size: 1.1rem; color: var(--ink-soft); }
.home-questions details[open] .is-closed, .home-questions details:not([open]) .is-open { display: none; }
.home-questions p { margin-block-start: 0.4rem; color: var(--ink-soft); font-size: 0.95rem; }

/* The foot */
/* The site's foot, its sides as the page's sections are; its language menu */
.home .site-foot { padding-inline: var(--home-edge); }
.home-languages { align-self: flex-start; margin-block-start: 0.6rem; }
.home-languages summary { display: inline-flex; align-items: center; gap: 0.3rem; padding-block: 0.3rem; padding-inline: 0.75rem 0.5rem; border-radius: 999px; background: var(--home-control); box-shadow: var(--home-raise); color: var(--ink); font-size: 0.8125rem; cursor: pointer; list-style: none; }
.home-languages summary::-webkit-details-marker { display: none; }
.home-languages summary .icon { inline-size: 1rem; block-size: 1rem; transition: rotate 0.2s; }
.home-languages[open] summary .icon { rotate: 180deg; }
.home .site-foot .home-languages ul { max-block-size: 14rem; margin-block-start: 0.5rem; padding-inline: 0.75rem; overflow-y: auto; }

/* Two columns under 70rem, one on a phone. */
@media not (min-width: 70rem) {
  .home-tile { flex-basis: calc((100% - 1rem) / 2); }
  .home-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-replay { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-replay > li:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
}

/* On a phone, the box stays docked at the foot while the page scrolls under it, the ideas leaving with
   the first screen; the tries scroll sideways (a column at 24rem or less), and every door's promise comes first. */
@media not (min-width: 48rem) {
  .home-personal, .home-personal :is(tbody, tr, th, td) { display: block; inline-size: auto; margin: 0; }
  .home-personal thead { display: none; }
  .home-personal tr { display: grid; gap: 0.4rem; margin-block-end: 1rem; }
  .home-personal tbody th { inline-size: auto; padding: 0; }
  .home-personal td::before { content: attr(data-label); display: block; color: var(--ink); font-size: 0.75rem; font-weight: 600; }
  body:has(> .home) app-composer { padding-block-end: 9rem; }
  body:has(> .home) app-composer > form.composer { position: fixed; inset-inline: 0; inset-block-end: max(0.75rem, env(safe-area-inset-bottom)); z-index: 4; margin-inline: auto; }
  body:has(> .home:not([hidden])) app-composer > :is(p, footer) { display: none; }
  /* What the keys reach scrolls into view above the docked box and the fade over it, never under them. */
  html:has(> body > .home:not([hidden])) { scroll-padding-block-end: 9rem; }
  body > .home::after { content: ''; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 1; block-size: 7rem; background: linear-gradient(oklch(from var(--room) l c h / 0), var(--room) 55%); pointer-events: none; }
  .home { --home-sheet: 1.25rem; }
  .home-strip, .home-strip ul { flex-wrap: nowrap; justify-content: flex-start; }
  .home-strip { overflow-x: auto; padding-inline: 1rem; scrollbar-width: none; }
  .home-strip .button, .home-strip > ul { flex: none; }
  @media (max-width: 24rem) { .home-strip, .home-strip ul { flex-wrap: wrap; overflow-x: visible; } .home-strip > ul { flex: 1 1 auto; } .home-tiles { flex-direction: column; margin-inline-end: 0; padding-inline-end: 0.3rem; overflow-x: visible; scroll-snap-type: none; } .home-tile { inline-size: auto; min-block-size: 0; } }
  .home-section { gap: 1.1rem; padding-block: 2.5rem; }
  .home-head.is-centred { align-self: stretch; align-items: flex-start; text-align: start; }
  .home-why, .home-sub, .home-promise-sub { font-size: 0.95rem; }
  .home-formats { justify-items: start; }
  .home-formats > div { justify-content: flex-start; }
  .home-formats dt { min-inline-size: 2.25rem; text-align: start; }
  .home-filter { align-self: flex-start; }
  .home-tiles { gap: 0.75rem; margin-inline-end: calc(-1 * var(--home-gutter)); padding-inline-end: var(--home-gutter); }
  .home-tile { flex: none; inline-size: 13.5rem; min-block-size: 18.5rem; }
  .home-row.is-turning .home-turn:not(:disabled) { display: none; }
  .home-replay, .home-doors, .home-questions, .home .site-foot { grid-template-columns: minmax(0, 1fr); }
  .home-replay { gap: 0.75rem; padding: 1rem; }
  .home-replay > li + li { padding-block-start: 0.75rem; padding-inline-start: 0; border-block-start: 1px solid var(--line); border-inline-start: 0; }
  .home-doors { gap: 0.6rem; }
  .home-door { min-block-size: 0; gap: 0.35rem; padding: 1rem 1.1rem; }
  .home-door.is-featured { grid-column: auto; gap: 0.6rem; }
  .home-door-title { font-size: 1.15rem; }
  .home-door.is-featured .home-door-title { font-size: 1.4rem; }
  .home-door:not(.is-featured) .home-door-title { order: -1; }
  .home-door:not(.is-featured) .home-door-name { order: -2; }
  .home .site-foot { gap: 1.25rem; padding: 2rem 1.25rem 9rem; }
}
@media (forced-colors: active) {
  .home-filter input:checked + label { forced-color-adjust: none; color: HighlightText; } .home-filter::before { forced-color-adjust: none; background: Highlight; }
  @supports not (anchor-name: --chosen) { .home-filter input:checked + label { background: Highlight; } }
  .home-tile.is-active { outline: 2px solid Highlight; }
  .home-bars span:nth-child(4) { background: Highlight; }
}