:root{color-scheme:light dark;
  --bg:#F1EEE7;--bg2:#E2DED5;--surface:#FAF8F4;--ink:#1E1E1C;--dim:#6B6860;--faint:#A29E95;--line:#D6D1C7;
  --play:#E0582B;--play-ink:#fff;--live:#E0582B;--metal:#B9B4AA;--label:#E0582B;--label-ink:#1E1E1C;
  --shadow:30,28,24;--sheen:.07}
@media (prefers-color-scheme:dark){:root{
  --bg:#23201B;--bg2:#111;--surface:#1C1B19;--ink:#F2EEE6;--dim:#A39D92;--faint:#6B665E;--line:#302E2A;
  --play:#CDB894;--play-ink:#15140F;--live:#E0582B;--metal:#CDB894;--shadow:0,0,0;--sheen:.05}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg2)}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;color:var(--ink);
  background:radial-gradient(120% 80% at 50% 0%,var(--bg) 45%,var(--bg2));background-attachment:fixed;
  font:17px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font-feature-settings:"kern"}
a{color:inherit;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:.18em}
::selection{background:color-mix(in srgb,var(--play) 30%,transparent)}

/* the strip at the top of every page */
.mast{display:flex;align-items:center;gap:10px;width:100%;max-width:640px;margin:0 auto;
  padding:max(18px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left));
  font-size:13px;color:var(--dim);text-decoration:none}
.mast img{width:28px;height:28px;border-radius:7px;box-shadow:0 0 0 .5px rgba(var(--shadow),.18),0 1px 2px rgba(var(--shadow),.12)}
.mast b{color:var(--ink);font-size:15px;letter-spacing:-.01em}

.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;color:var(--dim);
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.dot{width:7px;height:7px;border-radius:50%;background:var(--faint)}
.dot.on{background:var(--live);box-shadow:0 0 0 0 color-mix(in srgb,var(--live) 50%,transparent);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--live) 45%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}
h1{font-size:clamp(28px,8vw,34px);line-height:1.12;letter-spacing:-.025em;font-weight:650;margin:0 0 12px;text-wrap:balance}
h2{font-size:19px;letter-spacing:-.01em;margin:36px 0 6px}
.lede{color:var(--dim);margin:0 0 8px;text-wrap:pretty}
.liner{font-family:"New York",ui-serif,Georgia,serif;font-style:italic;color:var(--dim);font-size:16px;margin:0}

/* buttons: one primary action in the theme's play colour, the rest quiet */
.actions{display:grid;gap:10px;margin-top:28px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 20px;border-radius:14px;border:0;
  font:600 17px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;letter-spacing:-.01em;text-decoration:none;cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.8,.2,1),background-color .2s,box-shadow .2s;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--play);outline-offset:3px}
.btn.primary{background:var(--play);color:var(--play-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 1px rgba(var(--shadow),.12),0 6px 16px -6px color-mix(in srgb,var(--play) 70%,transparent)}
.btn.quiet{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
@media (hover:hover){.btn.primary:hover{filter:brightness(1.04)}.btn.quiet:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}}
.note{color:var(--faint);font-size:14px;margin:14px 0 0;text-align:center;text-wrap:balance}

/* a card for what's on */
.card{background:var(--surface);border-radius:16px;padding:14px 16px;margin-top:22px;
  box-shadow:0 0 0 .5px var(--line),0 1px 2px rgba(var(--shadow),.06),0 10px 24px -14px rgba(var(--shadow),.25)}
.card .t{font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .a{color:var(--dim);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{height:3px;border-radius:2px;background:var(--line);margin-top:12px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--play);border-radius:inherit}
.count{font-variant-numeric:tabular-nums;color:var(--dim);font-size:14px;margin-top:10px}

/* long reading: support, privacy */
.read{flex:1 0 auto;width:100%;max-width:640px;margin:0 auto;padding:36px max(20px,env(safe-area-inset-right)) 72px max(20px,env(safe-area-inset-left))}
.read h1{margin-bottom:6px}
.read .meta{color:var(--faint);font-size:14px;margin:0 0 28px}
.read p,.read li{text-wrap:pretty}
.read ul{padding-left:1.1em}.read li{margin:4px 0}.read li::marker{color:var(--faint)}
.read b{font-weight:600}

/* short task pages: an invite, connecting an assistant */
.task{flex:1 0 auto;width:100%;max-width:420px;margin:0 auto;padding:12px max(24px,env(safe-area-inset-right)) max(40px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}
.foot{display:flex;justify-content:center;gap:18px;padding:8px 0 max(28px,env(safe-area-inset-bottom));font-size:13px;color:var(--faint)}
.foot a{text-decoration:none}

/* the code field on Connect */
.code{width:100%;font:600 34px/1 ui-monospace,"SF Mono",Menlo,monospace;font-variant-numeric:tabular-nums;letter-spacing:.32em;text-indent:.32em;
  text-align:center;padding:16px 0;border-radius:14px;border:0;background:var(--surface);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 2px rgba(var(--shadow),.06);transition:box-shadow .2s}
.code::placeholder{color:var(--line)}
.code:focus{outline:0;box-shadow:inset 0 0 0 2px var(--play)}
.err{color:#C4422B;font-size:15px;margin:12px 0 0}
@media (prefers-color-scheme:dark){.err{color:#F08A6A}}

/* the turntable: a record with the friend's initial on its label, a tonearm that drops onto it */
.deck{position:relative;width:min(72vw,300px);aspect-ratio:1;margin:28px auto 36px}
.disc{position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle closest-side,#0c0c0c 0 2.6%,transparent 2.8%),
    radial-gradient(circle closest-side,var(--label) 0 34%,#0e0e0e 34.4% 37%,transparent 37.3%),
    radial-gradient(circle closest-side,transparent 0 94%,#1c1c1c 94.5% 95.5%,transparent 96%),
    repeating-radial-gradient(circle closest-side,#141414 0 1.2px,#1b1b1b 1.2px 2.6px),
    #121212;
  box-shadow:inset 0 0 0 3px #0a0a0a,inset 0 0 0 4px #262626,0 1px 2px rgba(var(--shadow),.3),0 28px 50px -22px rgba(var(--shadow),.6)}
.disc .initial{position:absolute;inset:0;display:grid;place-items:center;color:var(--label-ink);
  font:700 clamp(30px,9vw,40px)/1 -apple-system,BlinkMacSystemFont,system-ui;letter-spacing:-.02em;padding-bottom:22%}
.disc .ring{position:absolute;inset:0;display:grid;place-items:center;padding-top:26%;
  font:600 8px/1 -apple-system,system-ui;letter-spacing:.24em;color:color-mix(in srgb,var(--label-ink) 70%,transparent);text-transform:uppercase}
.sheen{position:absolute;inset:0;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:conic-gradient(from 20deg,transparent 0 8%,rgba(255,255,255,var(--sheen)) 14%,transparent 22% 50%,rgba(255,255,255,var(--sheen)) 64%,transparent 72%);
  -webkit-mask:radial-gradient(circle closest-side,transparent 37%,#000 38%);mask:radial-gradient(circle closest-side,transparent 37%,#000 38%)}
.arm{position:absolute;top:-6%;right:-9%;width:44%;height:86%;transform-origin:78% 9%;transform:rotate(-26deg);pointer-events:none;
  filter:drop-shadow(0 6px 6px rgba(var(--shadow),.28))}
.deck.idle .disc{filter:saturate(.15) brightness(.92)}

@media (prefers-reduced-motion:no-preference){
  .deck.live .arm{animation:drop .9s cubic-bezier(.3,.7,.2,1) .25s both}
  .deck.live .disc{animation:spinup 1.2s cubic-bezier(.333,0,.667,.333) 1s both,spin 1.8s linear 2.2s infinite}
  .rise{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
  .rise:nth-child(2){animation-delay:.06s}.rise:nth-child(3){animation-delay:.12s}.rise:nth-child(4){animation-delay:.18s}.rise:nth-child(5){animation-delay:.24s}
  .deck.rise{animation:settle .8s cubic-bezier(.2,.8,.2,1) both}
}
.deck.live .arm{transform:rotate(0deg)}
@keyframes drop{from{transform:rotate(-26deg)}to{transform:rotate(0deg)}}
/* 33⅓ rpm is 200°/s; the spin-up eases in and leaves at exactly that speed, so there's no seam */
@keyframes spinup{from{transform:rotate(0)}to{transform:rotate(120deg)}}
@keyframes spin{from{transform:rotate(120deg)}to{transform:rotate(480deg)}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes settle{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}