/* The homepage (home/index.js). Built from the tokens in style.css: ink on paper, colour only where a sound is,
   capsules for what you press, soft rectangles for what holds things, and one picture that comes back in every
   section: a recording under grain that comes apart into its sounds. */

.home {
  /* one spacing system, three steps that grow with what they separate (an 8 px grid at both ends): a heading from what
     it is about (32 on a phone, 56 on a computer), a band's edge from what is in it, top and bottom alike (48, 104), and
     one section from the next (96, 144) */
  --lead: clamp(32px, 3.8vw, 56px); --band-pad: clamp(48px, 7vw, 104px); --sec: clamp(96px, 10vw, 144px);
  --home-band: #1d1c19;   /* a step lighter than the page, so the bands stand clear of it */
  padding-top: clamp(10px, 2.6vh, 48px);
}
.home .display-2 { font-size: clamp(40px, 5.4vw, 74px); line-height: 1; letter-spacing: -0.022em; }
.home .display-2 em, .hero-title em { font-style: italic; }
.home .section-lede { font-size: clamp(16px, 1.3vw, 18px); max-width: 44ch; }
.sec-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.home :is(#how, #examples, #get, #faq) { scroll-margin-top: 84px; }   /* the links in the bar land below it */

/* things settle into place as they come into view, once (home/index.js adds .in) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- the hero ---------- */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center;
  /* the hero's three breaths: lede to picture, picture to the switch, switch to your own recording */
  --hero-gap-pic: clamp(14px, 3.2vh, 32px); --hero-gap-switch: clamp(8px, 1.6vh, 14px); --hero-gap-cta: clamp(22px, 3.8vh, 36px); }
.hero-title { font: 400 clamp(48px, 6.9vw, 104px)/0.94 var(--f-serif); letter-spacing: -0.03em; text-wrap: balance; }
.hero-title > span, .hero-title > em { display: inline-block; }
.hero-title em { letter-spacing: -0.024em; padding-right: 0.05em; }   /* room for the italic's overhang */
.hero-lede { margin-top: clamp(14px, 1.6vw, 22px); max-width: 64ch; color: var(--ink-2); font-size: clamp(16.5px, 1.35vw, 19.5px); line-height: 1.5; text-wrap: balance; }

/* the way to the app, where the upload bar was: the site shows Unmixed Audio, the app splits your own recordings */
.hero-cta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 18px; margin-top: var(--hero-gap-cta); }
.hero-note { font: 400 15px/1.4 var(--f-sans); color: var(--ink-2); }

/* the picture (home/flow.js): one recording flows in from the left as a grey waveform, through the box you drop your file on,
   and out on the right as its sounds, each on its own line with its name. The box sits in the middle, or further left when
   the screen leaves too little room on the right for the lines and their names */
.stage { --dot: 64px; --dot-ring: 6px; --dot-x: calc(50vw - 330px); position: relative; align-self: flex-start; width: 100vw; margin-left: calc(50% - 50vw); height: var(--stage-h, 322px); margin-top: var(--hero-gap-pic); }
.stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; view-transition-name: wave;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 92%, transparent); }
/* the round button where the recording comes apart: press it to hear the recording (home/flow.js). One solid disc, a ring of
   page round it so the waveform passes cleanly behind it; while it plays, a second ring breathes with the sound. A file
   dragged over the page turns its play into where the file will go */
.split-dot {
  position: absolute; z-index: 2; left: var(--dot-x); top: 50%; width: var(--dot); height: var(--dot); margin: calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2);
  padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--ink); color: var(--paper);
  box-shadow: 0 0 0 var(--dot-ring) var(--paper), 0 calc(var(--dot-ring) + 10px) 34px -14px var(--shade);
  transition: transform .55s var(--settle), box-shadow .35s var(--ease);
}
.split-dot .lens-icon { display: grid; place-items: center; width: 100%; height: 100%; }
.split-dot svg { grid-area: 1 / 1; width: calc(var(--dot) * .38); height: calc(var(--dot) * .38); transition: opacity .25s var(--ease), transform .45s var(--settle); }
.split-dot .i-play { fill: currentColor; }
.split-dot .i-drop { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: translateY(-5px); }
.split-dot:hover { transform: scale(1.05); }
.split-dot:active { transform: scale(.95); transition-duration: .12s; }
.split-dot:focus-visible { outline: 2px solid var(--ink); outline-offset: calc(var(--dot-ring) + 3px); }
.split-dot.loading svg { animation: breathe 1s ease-in-out infinite; }
.split-dot.failed { animation: refuse .45s var(--ease); }
.stage.ready .split-dot { transform: scale(1.12); box-shadow: 0 0 0 var(--dot-ring) var(--paper), 0 0 0 calc(var(--dot-ring) + 8px) var(--hover), 0 26px 60px -22px var(--shade); }
.stage.ready .split-dot .i-play { opacity: 0; transform: scale(.6); }
.stage.ready .split-dot .i-drop { opacity: 1; transform: none; }
/* while it plays: the ring just outside the page ring, swelling with everything you hear (home/flow.js sets --live) */
.split-dot::after { content: ""; position: absolute; inset: calc(-1 * var(--dot-ring) - 2px); border-radius: 50%; border: 1.5px solid var(--ink-3); pointer-events: none;
  opacity: calc(var(--live, 0) * .8); transform: scale(calc(1 + var(--live, 0) * .16)); will-change: transform, opacity; }
@media (max-width: 1099px) { .stage { --dot-x: 22vw; } }
/* the button's middle, watched by home/flow.js: the sound bar comes in once it has scrolled out of view */
.stage-mark { position: absolute; left: var(--dot-x); top: 50%; width: 1px; height: 1px; pointer-events: none; }
/* each sound's name over the start of its line: its icon or name turns it off and on. Behind the icon a drop of its colour
   (pieces/drop.js) flows gently all the time and lights up and grows with what you hear of the sound. Grey is what you
   don't hear now, crossed out is what you turned off; the drop stays, grey. Pointing at a sound changes nothing. The
   measures (how far apart, how high, how big) come from home/flow.js (TUNE), which sets the picture's height and these */
.stage-names { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.sn {
  position: absolute; display: flex; align-items: center; height: 36px; transform: translateY(-100%); pointer-events: auto; white-space: nowrap;
  opacity: 0; transition: opacity .5s var(--ease) calc(var(--i) * 45ms);
}
.sn.in { opacity: 1; }
.stage-names.intro .sn { transition-delay: calc(1.15s + var(--i) * 80ms); }
.sn.leaving { opacity: 0; pointer-events: none; transition-delay: 0s; }
.sn .rm-icon, .sn .rm-icon:hover { width: 36px; height: 36px; margin: 0 8px 0 -5px; border-radius: 50%; background: transparent; }
.sn .rm-icon:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.stage .sn .rm-glyph { width: var(--icon, 17.5px); height: var(--icon, 17.5px); }   /* Apple's symbol as the app's: 15 points on a 25 drop */
/* the drop (pieces/drop.js), drawn in a 48 px box round the icon: a soft tint at rest, lit up to its colour by the sound */
.sn .rm-icon::before { content: none; }
.sn .rm-icon .drop { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; overflow: visible; pointer-events: none; }
.sn .rm-icon .drop path { fill: color-mix(in srgb, var(--c) calc(18% + var(--live, 0) * 34%), transparent); }
.sn-name { position: relative; font-weight: 500; letter-spacing: -0.006em; padding: 0; cursor: pointer; }
.stage .sn-name { font-size: var(--name-size, 15px); }
/* off, as in the app: grey, and a slash drawn through its icon (so it doesn't rest on colour alone) */
.sn .rm-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.75px; height: calc(var(--icon, 17.5px) * 1.8); margin-left: -.875px; border-radius: 1px; background: var(--ink-3);
  transform: translateY(-50%) rotate(-45deg) scaleY(0); transition: transform .32s var(--ease); pointer-events: none; }
.sn-short { display: none; }
.sn.is-off .rm-icon::after { transform: translateY(-50%) rotate(-45deg) scaleY(1); }
.stage .sn.silent .rm-name { color: var(--ink-3); }
.stage .sn:not(.silent) .rm-name { color: var(--ink); }
.stage .sn.silent .rm-icon .drop path { fill: color-mix(in srgb, var(--ink-3) 16%, transparent); }
.stage .sn.silent .rm-icon[aria-checked] .rm-glyph.ready { color: var(--ink-3); opacity: .8; }
.stage .sn:not(.silent) .rm-icon[aria-checked] .rm-glyph.ready { color: var(--c); opacity: 1; }
/* the bar's own Choose a file shows only once the button under the picture has scrolled out of view (home/index.js) */

/* the sound bar (home/nowbar.js): a capsule floating at the bottom while the recording plays and the middle of its round
   button is out of view. Play, what is playing (press it to go back up), and each sound as a small drop */
.np {
  position: fixed; z-index: 40; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 4px; max-width: calc(100vw - 24px); padding: 6px;
  border-radius: var(--r-pill); background: color-mix(in srgb, var(--sheet) 86%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow-2);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  transform: translate(-50%, calc(100% + 30px)); opacity: 0; pointer-events: none; transition: transform .55s var(--settle), opacity .3s var(--ease);
}
.np.in { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.np button { border: 0; padding: 0; background: none; color: inherit; cursor: pointer; }
.np button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.np-play { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink) !important; color: var(--paper) !important; transition: transform .3s var(--settle); }
.np-play:active { transform: scale(.94); }
.np-play svg { width: 17px; height: 17px; fill: currentColor; }
.np-text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding: 0 12px 0 8px; text-align: left; }
.np-text b { font: 500 14px/1.1 var(--f-sans); letter-spacing: -0.006em; color: var(--ink); white-space: nowrap; }
.np-text span { font: 400 12.5px/1.1 var(--f-sans); color: var(--ink-3); white-space: nowrap; }
.np-sounds { display: flex; align-items: center; gap: 2px; padding: 0 4px 0 6px; border-left: 1px solid var(--line); }
.np-sound { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; }
.np-sound .drop { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; overflow: visible; pointer-events: none; }
.np-sound .drop path { fill: color-mix(in srgb, var(--c) calc(18% + var(--live, 0) * 34%), transparent); }
.np-glyph { position: relative; width: 19px; height: 19px; color: var(--c); transition: color .25s var(--ease); }
.np-glyph svg { width: 100%; height: 100%; display: block; }
.np-glyph svg path { fill: currentColor; }
.np-sound.silent .np-glyph { color: var(--ink-3); }
.np-sound.silent .drop path { fill: color-mix(in srgb, var(--ink-3) 16%, transparent); }
@media (max-width: 719px) { .np-text { display: none; } .np-sounds { border-left: 0; padding: 0 2px; } }
@media (prefers-reduced-motion: reduce) { .np { transition: opacity .2s; } }
/* under the picture: which recording (the result's switch) */
.hero-player { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; margin-top: var(--hero-gap-switch); }
.hero-player .rm-part { background: var(--sheet); }
.hero-player .rm-part button { height: 40px; padding: 0 18px; font-size: 14px; }

/* ---------- your files ---------- */
.files { margin-top: clamp(64px, 8vw, 104px); }
.files-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; margin-bottom: 14px; }
.files-head .eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.files-head .count { font: 500 10.5px/1 var(--f-small); letter-spacing: 0; color: var(--ink-3); padding: 4px 7px; border-radius: var(--r-pill); border: 1px solid var(--line); }
.files-head .count:empty { display: none; }
.shelf-nav { display: none; gap: 6px; }
.files.overflows .shelf-nav { display: inline-flex; }
.shelf-btn { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .15s, border-color .15s, opacity .2s, transform .15s var(--ease); }
.shelf-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shelf-btn:hover:not(:disabled) { background: var(--hover); border-color: var(--ink-3); }
.shelf-btn:active:not(:disabled) { transform: scale(.94); }
.shelf-btn:disabled { opacity: .32; cursor: default; }
.shelf-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.shelf { list-style: none; margin: 0 -6px; padding: 4px 6px 10px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 12px - 36px) / 4); gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 6px; scrollbar-width: none; overscroll-behavior-x: contain; }
.shelf::-webkit-scrollbar { display: none; }
.files.overflows .shelf:not(.at-end) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.files.overflows .shelf.at-end:not(.at-start) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px); mask-image: linear-gradient(90deg, transparent, #000 56px); }
.file { position: relative; scroll-snap-align: start; min-width: 0; }
.file a {
  position: relative; display: flex; flex-direction: column; padding: 8px; overflow: hidden;
  border-radius: var(--r-l); border: 1px solid var(--line); background: var(--sheet); color: var(--ink); text-decoration: none;
  transition: border-color .2s, transform .4s var(--settle), box-shadow .4s;
}
.file a:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--shadow-1); }
.file a:active { transform: translateY(0) scale(.99); transition-duration: .1s; }
.file a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* one card for a recording and its picture, here and in the examples: the same picture, title and line under it */
.file-art { display: block; border-radius: calc(var(--r-l) - 8px); background: var(--paper); padding: 14px 12px; }
.file-pic { display: block; width: 100%; height: 84px; }
.file .meta { min-width: 0; padding: 14px 38px 6px 10px; }
.file .name { display: block; font: 400 23px/1.1 var(--f-serif); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file .when { display: flex; align-items: center; font: 400 12px/1.4 var(--f-small); color: var(--ink-3); margin-top: 6px; }
.file.busy .when { color: var(--ink-2); }
.busy-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--ink); margin-right: 7px; animation: breathe 1.4s ease-in-out infinite; }
.file .forget { position: absolute; right: 8px; bottom: 8px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .15s, background .15s, color .15s; }
.file .forget svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.file:hover .forget, .file .forget:focus-visible { opacity: 1; }
.file .forget:hover { background: var(--hover); color: var(--ink); }
.file .forget:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
@media (hover: none) { .file .forget { opacity: 1; } }

/* a file's picture on its card, your files and the examples alike (home/cardart.js): its lines, coming apart where you
   point, on a soft light with a fine grain (its look in --grain-*, tuned on lab/grain.html). The light is laid out like
   its audio (pieces/audiolight.js): each sound's colour across its own row, strong where it is loud; grey while it is
   still being split; a video's too (its own picture sits beside the lines, square like an album cover, its corner
   concentric with the panel's, 16 - 12) */
.has-light { position: relative; overflow: hidden; isolation: isolate; }
.card-light { position: absolute; inset: -30px; z-index: -1; pointer-events: none; opacity: .5; transition: opacity .5s var(--ease); }
.card-light :is(img, canvas) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(26px) saturate(1.5); }
/* the grain: grey noise round the middle (SVG feTurbulence, about 1.2 px), soft light, so it shows evenly in the light's
   dark fades and in light mode and never washes the colours out; kept faint, a fine sheen rather than a texture you
   notice first (chosen on lab/grain.html with research/grain.md; made subtler on Sep's word, 27 Oct 2026) */
.card-light::after { content: ""; position: absolute; inset: 0; opacity: var(--grain-amount, .28); mix-blend-mode: var(--grain-blend, soft-light);
  background-image: var(--grain-image, url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'160'%20height%3D'160'%3E%3Cfilter%20id%3D'n'%20color-interpolation-filters%3D'sRGB'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.85'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D'linear'%20slope%3D'1.8'%20intercept%3D'-0.4'%2F%3E%3CfeFuncG%20type%3D'linear'%20slope%3D'1.8'%20intercept%3D'-0.4'%2F%3E%3CfeFuncB%20type%3D'linear'%20slope%3D'1.8'%20intercept%3D'-0.4'%2F%3E%3CfeFuncA%20type%3D'linear'%20slope%3D'0'%20intercept%3D'1'%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D'160'%20height%3D'160'%20filter%3D'url(%23n)'%2F%3E%3C%2Fsvg%3E")); background-size: var(--grain-size, 160px); }
/* every card wakes the same way where you point at it (on a phone, as it comes into view): its light brightens */
.awake .card-light { opacity: .68; }
.has-light.with-picture { display: flex; align-items: center; gap: 14px; padding: 12px; }
.with-picture :is(.file-pic, .ex-pic) { flex: 1 1 auto; min-width: 0; width: auto; }
.card-thumb { position: relative; flex: none; width: 88px; height: 88px; border-radius: 4px; overflow: hidden; background: #0b0b0a; box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 6px 16px -8px rgba(0, 0, 0, .5); }
.card-thumb :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--cy, 50%); transform: scale(var(--zoom, 1)); transform-origin: 50% var(--cy, 50%); }
.card-video { opacity: 0; transition: opacity .35s var(--ease); }
.playing .card-video { opacity: 1; }

/* ---------- the examples, on their own band ---------- */
.band { width: calc(100vw - 24px); margin-left: calc(50% - 50vw + 12px); margin-top: var(--sec); padding: var(--band-pad) 0; border-radius: var(--r-xl); background: var(--home-band); box-shadow: inset 0 0 0 1px color-mix(in srgb, white 5%, transparent); }
.band-inner { max-width: calc(var(--content) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-direction: column; align-items: center; }
.ex-grid { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: var(--lead); }
@media (min-width: 1101px) { .ex-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }   /* eight examples: two even rows */
.ex {
  display: flex; flex-direction: column; min-width: 0; padding: 8px; overflow: hidden; cursor: pointer; text-align: left; color: var(--ink); font: inherit;
  border-radius: var(--r-l); border: 1px solid var(--line); background: var(--sheet);
  transition: border-color .25s, transform .45s var(--settle), box-shadow .45s, background .25s;
}
.ex:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .75); }
.band .ex { background: color-mix(in srgb, var(--sheet) 70%, #2a2825); }   /* a touch lighter than the band */
.ex:active { transform: translateY(-1px) scale(.99); transition-duration: .12s; }
.ex:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ex-art { display: block; border-radius: calc(var(--r-l) - 8px); background: var(--paper); padding: 14px 12px; }
.ex-pic { display: block; width: 100%; height: 84px; }
.ex-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 10px 6px; flex: 1 1 auto; }
.ex-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ex-title { font: 400 23px/1.1 var(--f-serif); letter-spacing: -0.01em; min-width: 0; }
.ex-go { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--ink); opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .4s var(--settle); }
.ex-go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ex:hover .ex-go, .ex:focus-visible .ex-go, .ex.busy .ex-go { opacity: 1; transform: none; }
.ex.busy { pointer-events: none; }
.ex.busy .ex-go { animation: breathe 1s ease-in-out infinite; }
.ex-text { font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.ex-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }
.ex-kinds { min-width: 0; font: 400 12px/1.4 var(--f-small); color: var(--ink-3); }
.ex-len { display: inline-flex; align-items: center; gap: 6px; flex: none; font: 400 12px/1 var(--f-small); color: var(--ink-3); }
.ex-len svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.ex-more { margin-top: 32px; display: flex; flex-direction: column; align-items: center; }
.ex-more summary {
  list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: var(--r-pill); border: 1px solid var(--line-2);
  cursor: pointer; font-size: 15px; font-weight: 500; color: var(--ink-2); transition: color .15s, background .15s, border-color .15s;
}
.ex-more summary::-webkit-details-marker { display: none; }
.ex-more summary:hover { color: var(--ink); background: var(--hover); border-color: var(--ink-3); }
.ex-more summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ex-more summary svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; transition: transform .3s var(--settle); }
.ex-more[open] summary svg { transform: rotate(180deg); }
.ex-more .more-close, .ex-more[open] .more-open { display: none; }
.ex-more[open] .more-close { display: inline; }
.ex-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; max-width: 920px; animation: rise .45s var(--ease) both; }
.ex-list button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent; font-size: 15px; color: var(--ink-2); cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.ex-list button small { font: 400 11px/1 var(--f-small); color: var(--ink-3); }
.ex-list button:hover { color: var(--ink); background: var(--hover); border-color: var(--line-2); }
.ex-list button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ex-list button.busy { pointer-events: none; color: var(--ink); animation: breathe 1s ease-in-out infinite; }

/* ---------- the end of the page ---------- */
/* ---------- the app (home/getpart.js, its own styles in home/getpart.css): the section and its cards' frame ---------- */
.get { margin-top: var(--sec); }
.get-card { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; margin: 0; padding-top: 32px; overflow: hidden; isolation: isolate;
  border-radius: 32px; border: 1px solid var(--line); background: var(--sheet); }
.get-card figcaption { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 24px; text-align: center; }
.get-card figcaption b { font: 400 28px/1.06 var(--f-serif); letter-spacing: -.012em; text-wrap: balance; }
.get-card figcaption em { font-style: italic; }
.get-card figcaption span { max-width: 36ch; color: var(--ink-2); font-size: 15px; line-height: 1.45; text-wrap: balance; }

/* ---------- questions, answered: one line each, its answer opening under it ---------- */
.faq { margin-top: var(--sec); }
.faq-list { max-width: 780px; margin: var(--lead) auto 0; border-top: 1px solid var(--line); interpolate-size: allow-keywords; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 6px; cursor: pointer; border-radius: 6px;
  font: 400 23px/1.25 var(--f-serif); letter-spacing: -.005em; color: var(--ink); transition: color .15s var(--ease); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex: none; width: 15px; height: 15px; color: var(--ink-2); transition: transform .35s var(--ease);
  background: linear-gradient(currentColor, currentColor) center / 15px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 15px no-repeat; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.faq-list details::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--ease), content-visibility .4s allow-discrete; }
.faq-list details[open]::details-content { block-size: auto; }
.faq-list p { max-width: 62ch; padding: 0 6px 24px; color: var(--ink-2); font-size: 16px; line-height: 1.55; }

/* the mark and the name fill the width exactly, at any size */
.footer { margin-top: clamp(104px, 12vw, 160px); padding-bottom: 28px; container-type: inline-size; }
.footer-brand { display: flex; align-items: center; gap: 2.2cqw; color: var(--ink); }
.mark-giant { width: 20.5cqw; height: auto; }
.footer-word { font: 600 11.7cqw/0.8 var(--f-sans); letter-spacing: -0.055em; margin-top: -0.06em; white-space: nowrap; }
/* under the mark: © on the left, the links on the right (Credits opens under them), Apple's line last; on a phone the
   links in two columns */
.footer-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-top: clamp(28px, 4cqw, 48px); padding-top: 20px; border-top: 1px solid var(--line); font: 400 12px/1.4 var(--f-small); color: var(--ink-3); }
.footer-row nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.footer-row :is(a, button) { appearance: none; border: 0; padding: 0; background: none; font: inherit; color: var(--ink-3); text-decoration: none; cursor: pointer; border-radius: 4px; transition: color .15s; }
.footer-row :is(a, button):hover, .footer-credits[aria-expanded="true"] { color: var(--ink); }
.footer-row :is(a, button):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.credits-body { display: grid; gap: 8px; max-width: 110ch; padding-top: 16px; font: 400 12px/1.6 var(--f-small); color: var(--ink-3); }
.credits-body[hidden] { display: none; }
.credits-body b { font-weight: 500; color: var(--ink-2); }
.credits-body a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-legal { margin: 20px 0 0; max-width: 90ch; font: 400 11.5px/1.5 var(--f-small); color: var(--ink-3); }

/* ---------- smaller screens ---------- */
@media (max-width: 1040px) {
  .ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shelf { grid-auto-columns: calc((100% - 12px - 24px) / 3); }
}
/* a phone: the rows keep a short name, the picture takes the rest */
@media (max-width: 719px) {
  .home { padding-top: 18px; }
  .hero-title { font-size: clamp(48px, 14vw, 72px); }
  .hero-title > span, .hero-title > em { display: block; }
  .hero-lede { max-width: 32ch; }
  .stage { --dot: 50px; --dot-ring: 5px; --dot-x: 23vw; height: var(--stage-h, 287px); }
  .sn-long { display: none; }
  .sn-short { display: inline; }
  .sn { height: 32px; }
  .sn .rm-icon, .sn .rm-icon:hover { width: 32px; height: 32px; margin-right: 6px; }
  .stage .sn .rm-glyph { width: var(--icon, 14.7px); height: var(--icon, 14.7px); }
  .hero-player .rm-part button { padding: 0 14px; font-size: 13.5px; }
  .shelf { grid-auto-columns: 74%; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px; scroll-padding: 0 var(--gutter); }
  .files.overflows .shelf:not(.at-end), .files.overflows .shelf.at-end:not(.at-start) { -webkit-mask-image: none; mask-image: none; }
  .ex-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    width: calc(100% + 2 * var(--gutter)); margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px; scroll-padding: 0 var(--gutter); }
  .ex-grid::-webkit-scrollbar { display: none; }
  .ex { scroll-snap-align: start; }
  .band { width: calc(100vw - 16px); margin-left: calc(50% - 50vw + 8px); border-radius: 30px; }
  .store-badges { --badge: 44px; gap: 10px; justify-content: center; }
  .get-card { grid-column: 1 !important; grid-row: auto !important; padding-top: 26px; border-radius: 26px; }
  .get-card figcaption b { font-size: 26px; }
  .faq-list summary { padding: 18px 4px; font-size: 20px; }
  .footer-row { flex-direction: column-reverse; align-items: stretch; gap: 22px; }
  .footer-row nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; font-size: 13px; }
  .footer-row nav :is(a, button) { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}