:root {
  --ink: #f1e9dc;
  --dim: rgba(241, 233, 220, .58);
  --faint: rgba(241, 233, 220, .14);
  --card: rgba(14, 10, 7, .52);
  --card-solid: rgba(14, 10, 7, .82);
  --glow: #ffcf8a;
  --bg: #050403;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Jost", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* type roles: label is the one uppercase voice; meta is quiet sentence-case detail */
  --label: 500 11px/1 var(--sans);
  --label-track: .16em;
  --meta: 400 13px/1.3 var(--sans);
}
:root[data-theme="light"] {
  --ink: #221c16;
  --dim: rgba(34, 28, 22, .6);
  --faint: rgba(34, 28, 22, .14);
  --card: rgba(250, 246, 239, .55);
  --card-solid: rgba(250, 246, 239, .86);
  --glow: #b07a35;
  --bg: #ece6dc;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font: 400 15px/1.45 var(--sans); font-kerning: normal; -webkit-font-smoothing: antialiased; caret-color: var(--glow); transition: background-color 1.6s ease; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
button:focus-visible, a:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
a { color: inherit; }
::selection { background: color-mix(in srgb, var(--glow) 38%, transparent); color: var(--ink); }
canvas#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* everything over the room stays hidden until the camera has come round to the front */
#top, #menu, #playing, #caption { transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
body.intro #top, body:not(.menu) #menu, body:not(.session) #playing { opacity: 0; pointer-events: none; }
body:not(.menu) #menu { transform: translate(-50%, 24px); }
body:not(.session) #playing { transform: translate(-50%, 16px); }

/* top bar */
#top { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: max(18px, env(safe-area-inset-top)) 22px 0; pointer-events: none; }
#top > * { pointer-events: auto; }
.brand { display: flex; align-items: center; padding: 4px; margin: -4px; border-radius: 6px; opacity: .92; transition: opacity .3s, filter .4s; }
.brand:hover { opacity: 1; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--glow) 55%, transparent)); }
/* the mark on its own, drawn as its lines (about 1.4px wide at this size), with the lines' width kept inside the picture */
.brand svg { width: 38px; height: 33px; fill: none; stroke: currentColor; stroke-width: 26; stroke-linejoin: round; stroke-linecap: round; overflow: visible; }
.tools { display: flex; gap: 8px; }
body.session .tools { opacity: .35; transition: opacity .6s; }
body.session .tools:hover { opacity: 1; }
.icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--faint); background: var(--card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .3s, background-color 1.6s; }
.icon:hover { border-color: var(--ink); }
.icon svg { grid-area: 1 / 1; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: opacity .35s, transform .35s, filter .35s; }
/* the icon shows what a press will do */
#theme .moon, :root[data-theme="light"] #theme .sun, #mute .off, body.muted #mute .on, #pause .pl, #pause[data-state="paused"] .pz { opacity: 0; transform: scale(.4) rotate(-30deg); filter: blur(2px); }
:root[data-theme="light"] #theme .moon, body.muted #mute .off, #pause[data-state="paused"] .pl { opacity: 1; transform: none; filter: none; }

/* choosing: a sheet under Amir */
#menu { position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translate(-50%, 0); z-index: 6; width: min(600px, calc(100vw - 32px)); padding: 22px 22px 20px; border: 1px solid var(--faint); border-radius: 22px; background: var(--card); backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease), background-color 1.6s; }
#menu h2 { margin: 0 0 14px; font: italic 300 25px/1.1 var(--serif); letter-spacing: .01em; text-align: center; }
.sessions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.session-card { text-align: left; padding: 12px 14px 11px; border: 1px solid var(--faint); border-radius: 14px; transition: border-color .3s, background-color .3s; min-width: 0; }
.session-card:hover { border-color: var(--dim); }
.session-card[aria-checked="true"] { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.session-card b { display: block; font: 500 21px/1.15 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session-card small { display: block; margin-top: 4px; font: var(--meta); color: var(--dim); }
.row { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.row[hidden] { display: none; }
.row .label { width: 58px; flex: none; font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--dim); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { min-height: 34px; padding: 7px 15px; border: 1px solid var(--faint); border-radius: 999px; font-size: 14px; font-variant-numeric: lining-nums; transition: border-color .3s, background-color .3s, color .3s; }
.chip:hover { border-color: var(--dim); }
.chip[aria-checked="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.begin { display: block; width: 100%; margin-top: 18px; padding: 14px; border-radius: 999px; border: 1px solid var(--ink); font: 500 13px var(--sans); letter-spacing: .28em; text-indent: .28em; text-transform: uppercase; transition: background-color .3s, color .3s, box-shadow .6s; }
.site { display: block; width: fit-content; margin: 12px auto 0; font: var(--meta); color: var(--dim); text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 4px; transition: color .3s, text-decoration-color .3s; }
.site:hover { color: var(--ink); text-decoration-color: currentColor; }
.begin:hover { background: var(--ink); color: var(--bg); box-shadow: 0 0 28px color-mix(in srgb, var(--glow) 45%, transparent); }

/* during a practice: one quiet line at the bottom */
#playing { position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translate(-50%, 0); z-index: 6; display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 20px; border: 1px solid var(--faint); border-radius: 999px; background: var(--card); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow: hidden; max-width: calc(100vw - 32px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease), background-color 1.6s; }
body.session.still #playing { opacity: .28; }
body.session.still #playing:hover { opacity: 1; }
#playing .now { min-width: 0; }
#playing .now b { display: block; font: 500 19px/1.1 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#playing .now .meta { display: block; margin-top: 2px; font: var(--meta); font-size: 12px; color: var(--dim); white-space: nowrap; }
#playing .time { font-variant-numeric: tabular-nums; color: var(--dim); font-size: 14px; letter-spacing: .02em; }
#playing .icon { width: 34px; height: 34px; }
#playing .text { padding: 10px 14px; border-radius: 999px; font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--dim); }
#playing .text:hover { color: var(--ink); }
#progress { position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--glow); opacity: .8; }

#caption { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 5; margin: 0; width: min(560px, calc(100vw - 48px)); text-align: center; font: italic 300 21px/1.35 var(--serif); color: var(--ink); opacity: 0; pointer-events: none; text-shadow: 0 0 18px var(--bg); }
#caption.on { opacity: .9; }

/* the start screen (after the Museum of Consciousness): the mark draws its outlines in glowing white while the room
   loads, the square around it opens out past the edges, the mark comes closer, the name comes up, then Enter */
#start { position: fixed; inset: 0; z-index: 30; background: radial-gradient(ellipse at center, #131110 0%, #000 70%); }
#start.fading { opacity: 0; transition: opacity 2.2s ease; }
#start.gone { display: none; }
#ld { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.ld-base { fill: none; stroke: rgba(255, 255, 255, .13); stroke-linejoin: round; }
#ld-mark { transition: opacity 1.4s ease; }
#ld-draw path { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; visibility: hidden; }
#ld-foot { position: absolute; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; opacity: 0; pointer-events: none; transition: opacity .9s; }
#ld-foot.on { opacity: 1; pointer-events: auto; }
#start.leaving #ld-foot { opacity: 0 !important; pointer-events: none; transition: opacity .7s; }
#enter { padding: 11px 30px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 999px; color: #fff; font: 500 12px var(--sans); letter-spacing: .34em; text-indent: .34em; text-transform: uppercase; filter: drop-shadow(0 0 5px rgba(255, 255, 255, .45)); transition: background-color .25s, color .25s; }
#enter:hover, #enter:focus-visible { background: #fff; color: #000; outline: none; }
#ld-foot small { color: rgba(255, 255, 255, .6); font: 400 13px/1.3 var(--sans); letter-spacing: .02em; }

/* film grain over everything (src/grain.js makes the tile) */
#grain { position: fixed; inset: -100px; z-index: 40; pointer-events: none; background-size: 256px; opacity: .1; mix-blend-mode: soft-light; animation: grain 0.8s steps(1) infinite; }
:root[data-theme="light"] #grain { opacity: .16; }
@keyframes grain {
  0% { transform: translate(0, 0); } 10% { transform: translate(-41px, 23px); } 20% { transform: translate(57px, -38px); }
  30% { transform: translate(-19px, 71px); } 40% { transform: translate(83px, 12px); } 50% { transform: translate(-66px, -54px); }
  60% { transform: translate(31px, 47px); } 70% { transform: translate(-88px, 5px); } 80% { transform: translate(14px, -79px); }
  90% { transform: translate(62px, 66px); }
}

@media (max-width: 560px) {
  #menu { padding: 18px 14px 14px; border-radius: 20px; }
  #menu h2 { font-size: 22px; margin-bottom: 12px; }
  .sessions { grid-template-columns: repeat(2, 1fr); }
  .session-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .session-card { padding: 10px 11px; }
  .session-card b { font-size: 18px; }
  .session-card small { font-size: 12px; }
  .row { gap: 10px; }
  .row .label { width: 50px; }
  .chip { padding: 6px 12px; font-size: 13px; }
  #caption { bottom: 88px; font-size: 18px; }
  .brand svg { width: 32px; height: 28px; stroke-width: 30; }
}
@media (prefers-reduced-motion: reduce) {
  #top, #menu, #playing, #caption, .icon svg { transition-duration: .01s !important; }
  #grain { animation: none; }
}