/* Beyond Contact: shared styles for every page */
  /* Themes: the sky changes with the letter. Set in the letter's front matter (theme: earth | dawn | forest | ember | dusk | cave). */
  :root, [data-theme="earth"]{ --sky-0:#01010a; --sky-1:#040616; --sky-2:#04061a; }   /* the Earth from space: the front page */
  [data-theme="dawn"]  { --sky-0:#040a25; --sky-1:#241d4c; --sky-2:#542a58; }   /* the mountains at first light */
  [data-theme="forest"]{ --sky-0:#03070d; --sky-1:#071119; --sky-2:#08131e; }
  [data-theme="ember"] { --sky-0:#010207; --sky-1:#05060c; --sky-2:#1a0e09; }
  [data-theme="dusk"]  { --sky-0:#101428; --sky-1:#4c2b40; --sky-2:#68373e; }   /* the Karoo at sundown */
  [data-theme="cave"]  { --sky-0:#090402; --sky-1:#0c0604; --sky-2:#090402; }   /* a cave by firelight */
  :root{
    --ink: rgba(236,241,255,.94);
    --ink-soft: rgba(214,224,248,.78);
    --ink-faint: rgba(190,202,235,.55);
    --gold: #f3d98a;          /* star gold */
    --gold-deep: #dcb75a;
    --gold-glow: rgba(243,217,138,.38);
    --serif: "Fraunces", Georgia, "Times New Roman", serif;
  }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    background:var(--sky-2);
    color:var(--ink);
    font-family:var(--serif);
    font-weight:300;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  #sky{ position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; }
  main{ position:relative; z-index:1; }
  /* the fire's sparks (ember letters) fly on a layer of their own: over the closing picture, under the words */
  #sparks{ position:fixed; inset:0; width:100%; height:100%; display:block; pointer-events:none; z-index:0; }
  [data-theme="ember"] main > :not(.earth):not(#sparks){ position:relative; z-index:1; }

  .col{ width:100%; max-width:33rem; margin:0 auto; padding-left:24px; padding-right:24px; text-align:center; }   /* sides only, so sections keep their own space above and below */

  /* masthead */
  .mast{ min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 0 12vh; }
  .mast h1{
    font-weight:300; font-size:clamp(2.7rem, 9vw, 4.8rem); line-height:1.05; letter-spacing:-.01em;
    opacity:0; filter:blur(8px);
    animation: rise-blur 2s cubic-bezier(.2,.6,.2,1) .5s forwards;
  }
  .mast h1 .c{ color:var(--gold); text-shadow:0 0 26px var(--gold-glow); }
  /* the greeting, then the two lines under it, one after the other, then "read on" */
  .mast .tag{
    font-style:italic; font-size:clamp(1.3rem, 3.7vw, 1.8rem); color:var(--ink); margin-top:1.2rem; max-width:22ch;
    opacity:0; animation: rise 1.8s ease-out 2.1s forwards;
  }
  .mast .tag b{ font-weight:500; }
  .mast .intro{ max-width:26rem; margin-top:2.6rem; font-size:clamp(1.1rem, 2.7vw, 1.35rem); line-height:1.6; color:var(--ink-soft); text-wrap:balance; }
  .mast .intro span{ display:block; opacity:0; animation: rise 1.8s ease-out 3.6s forwards; }
  .mast .intro span + span{ margin-top:.6rem; animation-delay:5.2s; }
  .mast .down{
    margin-top:10vh; color:var(--ink-faint); font-size:.9rem; text-decoration:none; letter-spacing:.02em;
    opacity:0; animation: rise 1.8s ease-out 6.8s forwards;
  }
  .mast .down:hover{ color:var(--ink-soft); }

  /* sections */
  section{ padding:10vh 0; }
  .star{ display:block; color:var(--gold); text-shadow:0 0 16px var(--gold-glow); font-size:.9rem; margin:0 auto 3.2rem; }
  .lines p{ font-size:clamp(1.25rem, 2.8vw, 1.6rem); line-height:1.5; text-wrap:balance; }
  .lines p + p{ margin-top:1.6rem; }
  .lines .lead{ font-size:clamp(1.55rem, 3.9vw, 2.1rem); line-height:1.3; font-weight:300; margin-bottom:2.8rem; text-wrap:balance; }
  .lines .soft{ color:var(--ink-soft); }
  /* the front page's letter: what they can't do, close together; a pause; "Look up. And wonder." larger; the sign-off small */
  .lines .can + .can{ margin-top:.9rem; }
  .lines .up{ font-size:clamp(1.7rem, 4.4vw, 2.4rem); line-height:1.2; }
  .lines .can + .up{ margin-top:3.2rem; }
  .lines .up + .up{ margin-top:.5rem; }
  .lines .up + .soft{ margin-top:3.6rem; }
  .lines .up ~ .soft{ font-size:clamp(1.05rem, 2.4vw, 1.25rem); }
  .lines .soft + .soft{ margin-top:.35rem; }
  /* lines that arrive one after another: sky.js gives each its moment */
  .cascade > *{ opacity:0; transform:translateY(12px); transition:opacity 1.4s ease, transform 1.4s ease; }
  .cascade > .in{ opacity:1; transform:none; }

  h2{ font-weight:400; font-size:1rem; letter-spacing:.06em; color:var(--gold); text-shadow:0 0 14px var(--gold-glow); margin-bottom:2rem; }
  .hold{ list-style:none; }
  .hold li{ font-size:clamp(1.15rem, 2.6vw, 1.4rem); line-height:1.5; padding:.55rem 0; color:var(--ink); }
  .hold li + li{ border-top:1px solid rgba(214,224,248,.10); }

  .sent p{ font-size:clamp(1.1rem, 2.4vw, 1.3rem); color:var(--ink-soft); }
  .sent p + p{ margin-top:1.2rem; }

  /* signup */
  form{ margin-top:1.6rem; display:flex; flex-direction:column; gap:.65rem; }
  @media (min-width:480px){ form{ flex-direction:row; } input[type=email]{ flex:1; } }
  input[type=email]{
    appearance:none; width:100%; padding:.95rem 1.25rem; border-radius:999px;
    border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.07);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    color:var(--ink); font-family:inherit; font-size:1rem; outline:none; transition:border-color .25s, background .25s;
  }
  input[type=email]::placeholder{ color:rgba(200,212,240,.45); }
  input[type=email]:focus{ border-color:var(--gold); background:rgba(255,255,255,.10); }
  button{
    padding:.95rem 1.6rem; border-radius:999px; border:none; cursor:pointer;
    background:linear-gradient(180deg,#fff2c6,#e9c86c); color:#1d1606;
    font-family:inherit; font-size:1rem; font-weight:500;
    transition:transform .15s ease, box-shadow .3s; box-shadow:0 0 0 rgba(243,217,138,0);
  }
  button:hover{ transform:translateY(-1px); box-shadow:0 4px 30px var(--gold-glow); }
  button[disabled]{ opacity:.6; cursor:wait; }
  .msg{ margin-top:1.1rem; font-size:1.05rem; }
  .done{ display:none; }
  .done h3{ font-weight:300; font-size:2rem; margin-bottom:.4rem; }
  .done p{ color:var(--ink-soft); }
  .is-done form, .is-done .ask{ display:none; }
  .is-done .done{ display:block; animation: rise 1.2s ease-out forwards; }
  .err{ display:none; color:#ffb3a7; font-size:.95rem; }
  .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

  /* footer + earth (the Earth closes every page) */
  footer{ padding:6vh 24px 4vh; text-align:center; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(170,185,220,.42); }
  footer a{ color:rgba(190,202,235,.6); text-decoration:none; }
  footer a:hover{ color:var(--ink-soft); }
  footer span{ display:inline-block; padding:0 .6em; }   /* inline-block: on a narrow phone the links may wrap between them */
  @media (max-width:400px){ footer{ letter-spacing:.12em; } footer span{ padding:0 .45em; } }
  .earth{ --ground-h:clamp(200px, 23vw, 440px); --ground-hm:210px; --ground-wm:200%; --ground-fade:55%;
    position:relative; isolation:isolate; height:var(--ground-h); overflow:hidden; background:var(--sky-2);
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 var(--ground-fade)); mask-image:linear-gradient(to bottom, transparent 0%, #000 var(--ground-fade)); }
  /* "screen": black in the photo lets the page's sky through, so the picture melds into every theme */
  .earth img{ position:absolute; left:var(--ground-x, 50%); bottom:0; transform:translateX(calc(-1 * var(--ground-x, 50%))); width:max(100%, 1100px); height:auto; display:block; mix-blend-mode:screen; }
  @media (max-width:600px){ .earth{ height:var(--ground-hm); --ground-x:var(--ground-xm, 50%); } .earth img{ width:var(--ground-wm); } }
  /* ember letters close with the fire (taller picture: the sparks need room to rise) */
  .earth.ground-fire{ --ground-h:clamp(240px, 32.4vw, 640px); --ground-hm:260px; --ground-wm:205%; --ground-fade:50%; }
  /* cave letters: the sky draws DJ's picture of the cave itself, and at the end of the letter raises it so the floor and the
     fire come into view. The closing box is only room for them (and holds the picture, unseen, for the sky to draw). */
  .earth.ground-cave{ --ground-h:clamp(240px, 30vw, 560px); --ground-hm:260px; background:none; -webkit-mask-image:none; mask-image:none; }
  .earth.ground-cave picture{ display:none; }
  /* forest letters close with the rainforest's tree line alone, cut out of the photograph: the page's own sky carries on behind it */
  .earth.ground-forest{ --ground-h:clamp(240px, 31.9vw, 640px); --ground-hm:255px; --ground-wm:205%; }
  .earth.ground-cutout{ background:none; -webkit-mask-image:none; mask-image:none; }
  .earth img.over{ mix-blend-mode:normal; }
  /* dawn and earth close with photographs whose sky is already lit: they sit on the page as they are and fade in at the top,
     their colours carried up into the page's sky. The fade is on the photograph itself, because Safari on phones does not
     always carry a box's fade down to a picture moved inside it (the photograph then showed a hard top edge), and the
     photograph always fills its box exactly. On phones the Karoo is shifted so the sun stays in view. */
  .earth.ground-photo{ background:none; -webkit-mask-image:none; mask-image:none; }
  .earth.ground-photo img{ mix-blend-mode:normal; height:100%; width:auto; min-width:100%; max-width:none; object-fit:cover; object-position:50% 100%;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 var(--ground-fade)); mask-image:linear-gradient(to bottom, transparent 0%, #000 var(--ground-fade)); }
  .earth.ground-dawn{ --ground-h:clamp(240px, 32.4vw, 640px); --ground-hm:260px; --ground-wm:205%; --ground-fade:42%; }
  .earth.ground-karoo{ --ground-h:clamp(240px, 32.4vw, 640px); --ground-hm:260px; --ground-wm:205%; --ground-fade:42%; --ground-xm:20%; }

  /* reveal on scroll */
  .reveal{ opacity:0; transform:translateY(16px); transition:opacity 1.3s ease, transform 1.3s ease; }
  .reveal.in{ opacity:1; transform:none; }

  @keyframes rise{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none; } }
  @keyframes rise-blur{ from{ opacity:0; transform:translateY(14px); filter:blur(8px);} to{ opacity:1; transform:none; filter:blur(0);} }
  @media (prefers-reduced-motion: reduce){
    .mast h1, .mast .tag, .mast .intro span, .mast .down{ animation:none; opacity:1; filter:none; }
    .reveal, .cascade > *{ opacity:1; transform:none; transition:none; }
    html{ scroll-behavior:auto; }
  }

  /* about page: the site, why uncontacted, who writes, and room for other voices */
  .about{ padding:18vh 24px 4vh; }
  .about-part{ padding:9vh 24px 4vh; }
  .about .lines-p{ font-size:clamp(1.3rem, 3vw, 1.7rem); line-height:1.4; }
  .about .soft, .about-part .soft{ color:var(--ink-soft); font-size:clamp(1.05rem, 2.3vw, 1.2rem); line-height:1.6; margin:1.3rem auto 0; max-width:34rem; }
  .about-part .soft{ margin-top:0; }
  .about-part .soft + .soft{ margin-top:1.3rem; }   /* a section of a few paragraphs (Why uncontacted, Other voices) */
  .about-part .all{ margin-top:1.4rem; }
  .people{ list-style:none; }
  .people li + li{ margin-top:3.4rem; }
  .people h3{ font-weight:400; font-size:1.3rem; margin-bottom:.6rem; }
  .people p{ color:var(--ink-soft); font-size:clamp(1.02rem, 2.2vw, 1.12rem); line-height:1.6; max-width:30rem; margin:0 auto; }
  .people p + p{ margin-top:1.1rem; }
  .portrait{ display:block; width:120px; height:120px; border-radius:50%; margin:0 auto 1.3rem; overflow:hidden; border:1px solid rgba(243,217,138,.35); background:radial-gradient(circle at 40% 35%, rgba(243,217,138,.16), rgba(2,3,15,0) 70%); }
  .portrait img{ display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.88) brightness(.9); }
  /* a note from someone who would like to write */
  form.write{ flex-direction:column; max-width:30rem; margin-left:auto; margin-right:auto; }
  form.write input, form.write textarea{
    appearance:none; width:100%; padding:.95rem 1.25rem; border-radius:20px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.07);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:var(--ink); font-family:inherit; font-size:1rem; outline:none; transition:border-color .25s, background .25s; }
  form.write input[type=email]{ flex:none; }
  form.write textarea{ resize:vertical; min-height:7.5rem; line-height:1.5; }
  form.write input::placeholder, form.write textarea::placeholder{ color:rgba(200,212,240,.45); }
  form.write input:focus, form.write textarea:focus{ border-color:var(--gold); background:rgba(255,255,255,.10); }
  form.write button{ align-self:center; margin-top:.35rem; }

  /* top nav (all pages) */
  .top{ position:absolute; top:0; left:0; right:0; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:20px 24px; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; }
  .top a{ color:rgba(190,202,235,.55); text-decoration:none; }
  .top a:hover, .top a[aria-current]{ color:var(--ink-soft); }
  .top .links a + a{ margin-left:1.6em; }
  @media (max-width:430px){ .top{ padding:18px 16px; font-size:.62rem; letter-spacing:.13em; } .top .links a + a{ margin-left:1.1em; } }

  /* letters list (home + letters index) */
  .letters{ list-style:none; text-align:left; }
  .letters li{ padding:1.1rem 0; border-top:1px solid rgba(214,224,248,.10); }
  .letters li:last-child{ border-bottom:1px solid rgba(214,224,248,.10); }
  .letters a{ color:var(--ink); text-decoration:none; font-size:clamp(1.2rem,2.6vw,1.45rem); line-height:1.35; }
  .letters a:hover{ color:var(--gold); }
  .letters .meta{ display:block; font-size:.78rem; letter-spacing:.1em; margin-bottom:.3rem; }
  .letters time{ color:var(--gold); text-shadow:0 0 12px var(--gold-glow); }
  .letters .by{ color:var(--ink-faint); }
  .letters .by::before{ content:"·"; margin:0 .6em; }
  .letters p{ color:var(--ink-soft); font-size:1rem; margin-top:.35rem; line-height:1.5; }
  .all{ display:inline-block; margin-top:1.8rem; color:var(--ink-faint); text-decoration:none; font-size:.95rem; }
  .all:hover{ color:var(--ink-soft); }
  .empty{ color:var(--ink-soft); font-size:clamp(1.1rem,2.4vw,1.3rem); }

  /* a letter */
  .letter{ padding:14vh 0 8vh; }
  .letter .col{ text-align:left; max-width:36rem; }
  .letter .star{ margin-bottom:2rem; }
  .letter time{ display:block; text-align:center; font-size:.78rem; letter-spacing:.14em; color:var(--gold); text-shadow:0 0 12px var(--gold-glow); }
  .letter h1{ font-weight:300; font-size:clamp(2rem,6vw,3rem); line-height:1.15; text-align:center; margin:.7rem 0 3rem; }
  .letter .byline{ text-align:center; margin:-2.1rem 0 3rem; font-size:1rem; font-style:italic; color:var(--ink-soft); }
  .letter .byline a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(214,224,248,.25); }
  .letter .byline a:hover{ border-bottom-color:var(--ink-soft); }
  .letter .sources{ margin-top:3.2rem; font-size:.88rem; line-height:1.65; color:var(--ink-faint); }
  .letter .sources a{ color:var(--ink-soft); text-decoration:none; border-bottom:1px solid rgba(214,224,248,.2); }
  .prose{ font-size:1.2rem; line-height:1.7; color:var(--ink); }
  .prose p{ margin:0 0 1.4em; }
  .prose h2{ font-size:1.5rem; font-weight:400; color:var(--ink); letter-spacing:0; text-shadow:none; margin:2.4em 0 .8em; }
  .prose h3{ font-size:1.25rem; font-weight:400; margin:2em 0 .6em; }
  .prose strong{ font-weight:500; }
  .prose a{ color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(243,217,138,.35); }
  .prose a:hover{ border-bottom-color:var(--gold); }
  .prose blockquote{ margin:1.8em 0; padding-left:1.2em; border-left:1px solid rgba(243,217,138,.5); color:var(--ink-soft); font-style:italic; }
  .prose blockquote p:last-child{ margin-bottom:0; }
  .prose ul, .prose ol{ margin:0 0 1.4em 1.4em; }
  .prose li{ margin:.3em 0; }
  .prose hr{ border:0; text-align:center; margin:2.6em 0; }
  .prose hr::after{ content:"✦"; color:var(--gold); text-shadow:0 0 12px var(--gold-glow); font-size:.9rem; }
  .prose figure{ margin:2.2em 0; }
  .prose img{ max-width:100%; height:auto; display:block; border-radius:4px; }
  .prose figcaption{ margin-top:.7em; font-size:.92rem; color:var(--ink-faint); text-align:center; line-height:1.5; }
  .prose code{ font-family:ui-monospace, Menlo, monospace; font-size:.9em; color:var(--ink-soft); }
  .letter .nextprev{ display:flex; justify-content:space-between; gap:1rem; margin-top:4rem; font-size:.95rem; }
  .letter .nextprev a{ color:var(--ink-faint); text-decoration:none; max-width:48%; }
  .letter .nextprev a:hover{ color:var(--ink-soft); }
  .letter .sign{ margin-top:5rem; text-align:center; }
  .letter .sign p{ color:var(--ink-soft); font-size:1.05rem; }
  .letter .sign form{ max-width:30rem; margin-left:auto; margin-right:auto; }

  .letter .star{ text-align:center; }

  /* listening (letters only): the writer's reading and the sound of the sky, under the title,
     then a small panel at the foot of the screen once either is playing. Played by js/listen.js. */
  .listen{ display:flex; justify-content:center; flex-wrap:wrap; gap:.7rem; margin:-1.2rem 0 3rem; }
  .letter .byline + .listen{ margin-top:-1.6rem; }
  .listen audio{ display:none; }
  .listen .lbtn{ display:inline-flex; align-items:center; gap:.55rem; padding:.58rem 1.05rem .58rem .85rem; border-radius:999px;
    border:1px solid rgba(214,224,248,.2); background:rgba(255,255,255,.03); color:var(--ink-soft); font-family:inherit; font-weight:400;
    font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; line-height:1.2; cursor:pointer; box-shadow:none;
    transition:border-color .3s, color .3s, box-shadow .3s, background .3s; }
  .listen .lbtn:hover{ transform:none; border-color:rgba(243,217,138,.55); color:var(--ink); box-shadow:none; }
  .listen .lbtn:focus-visible, .dock button:focus-visible, .dock input:focus-visible{ outline:1px solid var(--gold); outline-offset:3px; }
  .listen .lbtn .ico{ display:inline-flex; color:var(--gold); }
  .listen .lbtn svg{ width:13px; height:13px; }
  .listen .lbtn .len{ color:var(--ink-faint); letter-spacing:.08em; text-transform:none; }
  .listen .lbtn .len:empty{ display:none; }
  .listen .lbtn[aria-pressed="true"]{ border-color:rgba(243,217,138,.75); color:var(--ink); background:rgba(243,217,138,.06); box-shadow:0 0 18px rgba(243,217,138,.16); }
  .lbtn.snd .w, .dock [data-act="sound"] .w{ opacity:.35; transition:opacity .4s; }
  .lbtn.snd[aria-pressed="true"] .w, .dock [data-act="sound"].is-on .w{ opacity:1; }
  .lbtn.snd.is-loading .w{ animation:bc-pulse 1s ease-in-out infinite; }
  @keyframes bc-pulse{ 50%{ opacity:1; } }

  .dock{ position:fixed; left:50%; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:5; width:min(31rem, calc(100vw - 20px));
    padding:.75rem 2.7rem .75rem .9rem; border-radius:18px; background:rgba(7,9,22,.88); border:1px solid rgba(214,224,248,.13);
    -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); box-shadow:0 12px 40px rgba(0,0,0,.45);
    color:var(--ink-soft); font-size:.72rem; opacity:0; transform:translate(-50%, 16px); pointer-events:none; transition:opacity .5s ease, transform .5s ease; }
  .dock.is-open{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
  .dock [hidden]{ display:none !important; }
  .dock .row{ display:grid; grid-template-columns:30px minmax(0, 1fr) auto; align-items:center; column-gap:.75rem; }
  .dock .row + .row{ margin-top:.6rem; padding-top:.6rem; border-top:1px solid rgba(214,224,248,.08); }
  .dock button{ padding:0; border:0; border-radius:50%; background:none; box-shadow:none; color:var(--gold); cursor:pointer; font-weight:400; transition:color .3s; }
  .dock button:hover{ transform:none; box-shadow:none; color:#fff2c6; }
  .dock .dbtn{ width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(243,217,138,.45); }
  .dock .dbtn svg{ width:12px; height:12px; }
  .dock .dlabel{ display:block; font-style:italic; font-size:.92rem; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dock .seekline{ display:flex; align-items:center; gap:.6rem; margin-top:.15rem; }
  .dock .time{ flex:none; min-width:2.6em; font-variant-numeric:tabular-nums; color:var(--ink-faint); font-size:.72rem; }
  .dock .time[data-left]{ text-align:right; }
  .dock .seek{ flex:1; min-width:0; }
  .dock .vol{ width:5.5rem; }
  .dock .dclose{ position:absolute; top:.5rem; right:.55rem; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; color:var(--ink-faint); }
  .dock .dclose svg{ width:11px; height:11px; }
  .dock .dclose:hover{ color:var(--ink); }
  .dock input[type=range]{ -webkit-appearance:none; appearance:none; height:20px; margin:0; background:transparent; cursor:pointer; }
  .dock input[type=range]::-webkit-slider-runnable-track{ height:2px; border-radius:2px; background:linear-gradient(90deg, var(--gold) var(--fill, 0%), rgba(214,224,248,.22) var(--fill, 0%)); }
  .dock input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:11px; height:11px; margin-top:-4.5px; border:0; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold-glow); }
  .dock input[type=range]::-moz-range-track{ height:2px; border-radius:2px; background:rgba(214,224,248,.22); }
  .dock input[type=range]::-moz-range-progress{ height:2px; border-radius:2px; background:var(--gold); }
  .dock input[type=range]::-moz-range-thumb{ width:11px; height:11px; border:0; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold-glow); }
  @media (max-width:430px){ .dock{ padding:.7rem 2.4rem .7rem .75rem; } .dock .vol{ width:4.4rem; } .dock .row{ column-gap:.6rem; } }
  @media (prefers-reduced-motion: reduce){ .dock{ transition:none; } .lbtn.snd.is-loading .w{ animation:none; } }
  .letter .credit{ margin-top:3.4rem; text-align:center; font-size:.8rem; line-height:1.6; color:var(--ink-faint); }
  .letter .credit a{ color:var(--ink-soft); text-decoration:none; border-bottom:1px solid rgba(214,224,248,.2); }