/* Pilu Calm Room for the web: the same look as the iPad app (frosted cards over slow, soft light in the
   colours of the time of day), laid out for a landscape tablet, an upright tablet, a phone or a desktop. */

/* MARK: Colours of the day (they ease into each other over 3 s) */

@property --top { syntax: '<color>'; inherits: true; initial-value: #070B1F; }
@property --bottom { syntax: '<color>'; inherits: true; initial-value: #1E2457; }
@property --g1 { syntax: '<color>'; inherits: true; initial-value: #3F4FA8; }
@property --g2 { syntax: '<color>'; inherits: true; initial-value: #6B5BB5; }
@property --g3 { syntax: '<color>'; inherits: true; initial-value: #2B7A9B; }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #B9C4FF; }

:root {
  --serif: ui-serif, "New York", "Iowan Old Style", Charter, Georgia, "Times New Roman", serif;
  --round: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ink: rgba(0, 0, 0, .78);
  --warn: #FF6B6B;
  --amber: #F5B94A;
  --urgent: #FF6B5E;
  --u: 1024px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  color-scheme: dark;
  transition: --top 3s ease-in-out, --bottom 3s ease-in-out, --g1 3s ease-in-out, --g2 3s ease-in-out, --g3 3s ease-in-out, --accent 3s ease-in-out;
}
:root[data-palette="morning"] { --top: #2E3A66; --bottom: #B07A62; --g1: #F2B591; --g2: #E58F86; --g3: #8FA2E0; --accent: #F7C9A4; }
:root[data-palette="midday"]  { --top: #123F4A; --bottom: #4F8A83; --g1: #8FD1C1; --g2: #E8D9A6; --g3: #5FA8C4; --accent: #BDE8DA; }
:root[data-palette="evening"] { --top: #2A1B45; --bottom: #8C4160; --g1: #E07A7A; --g2: #B667A8; --g3: #F2A65A; --accent: #F5B8A8; }
:root[data-palette="night"]   { --top: #070B1F; --bottom: #1E2457; --g1: #3F4FA8; --g2: #6B5BB5; --g3: #2B7A9B; --accent: #B9C4FF; }

/* MARK: Base */

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none;
  background: var(--top); color: #fff; font-family: var(--round); font-size: 16px; line-height: 1.35;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-text-size-adjust: 100%;
}
h1, h2, h3, p { margin: 0; font-weight: inherit; }
h1, h2, .serif { text-wrap: balance; }
p, .begin-raga, .hero-detail, .amb-summary { text-wrap: pretty; }
button, select, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 12px; }
[hidden] { display: none !important; }
.i { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -0.14em; }
.i.small { width: .8em; height: .8em; }
.i.nudge { transform: translateX(6%); }
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.005em; }
.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior: contain; }
.scroll::-webkit-scrollbar, .home-scroll::-webkit-scrollbar, .col::-webkit-scrollbar { display: none; }
.press { transition: transform .2s ease-out, opacity .2s ease-out, background-color .3s, color .3s; }
.press:active:not(:disabled) { transform: scale(.96); opacity: .85; }
.muted { color: rgba(255, 255, 255, .7); font-size: 15px; }
.muted.small { font-size: 13px; color: rgba(255, 255, 255, .6); display: flex; gap: 8px; align-items: flex-start; }
.muted.center { text-align: center; max-width: 360px; margin: 0 auto; }
.section-title { font-size: 14px; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; color: rgba(255, 255, 255, .65); }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .115em; text-transform: uppercase; color: var(--accent); }
.badge { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 25%, transparent); white-space: nowrap; }
.badge.solid { background: var(--accent); color: var(--ink); padding: 4px 9px; }

/* MARK: Soft light behind everything (cheap: gradients moved by the compositor, paused when hidden or dimmed) */

.bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: linear-gradient(var(--top), var(--bottom)); }
.app-bg { position: fixed; z-index: 0; }
.bg i {
  position: absolute; left: calc(50% - 38vmax); top: calc(50% - 38vmax); width: 76vmax; height: 76vmax; border-radius: 50%;
  opacity: var(--glow, 1); will-change: transform; animation: 150s ease-in-out infinite alternate both;
}
.bg i:nth-child(1) { --c: var(--g1); animation-name: glow-a; }
.bg i:nth-child(2) { --c: var(--g2); animation-name: glow-b; animation-duration: 190s; }
.bg i:nth-child(3) { --c: var(--g3); animation-name: glow-c; animation-duration: 230s; }
.bg i { background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 45%, transparent) 0%, color-mix(in srgb, var(--c) 40%, transparent) 45%, color-mix(in srgb, var(--c) 20%, transparent) 72%, transparent 100%); }
@keyframes glow-a { 0% { transform: translate(-28vw, -22vh); } 50% { transform: translate(24vw, 14vh) scale(1.08); } 100% { transform: translate(-8vw, 26vh) scale(.94); } }
@keyframes glow-b { 0% { transform: translate(30vw, 20vh) scale(.95); } 50% { transform: translate(-22vw, -16vh); } 100% { transform: translate(12vw, -26vh) scale(1.06); } }
@keyframes glow-c { 0% { transform: translate(0, 28vh) scale(1.04); } 50% { transform: translate(-30vw, 4vh) scale(.92); } 100% { transform: translate(26vw, -10vh); } }
body.dimmed .bg i, body:has(#home.covered) .app-bg i, .layer:not(.shown) .bg i { animation-play-state: paused; }
.shade { position: absolute; inset: 0; background: rgba(0, 0, 0, var(--shade, .25)); pointer-events: none; }

/* Nothing sits still on an always-on screen: content drifts a few pixels in slow circles. */
.drift { animation: drift 420s linear infinite; }
@keyframes drift {
  0% { transform: translate(0, 14px); } 25% { transform: translate(14px, 0); } 50% { transform: translate(0, -14px); }
  75% { transform: translate(-14px, 0); } 100% { transform: translate(0, 14px); }
}
body.dimmed .drift { animation-play-state: paused; }

/* MARK: Breathing circle: 5 s in, 5 s out, kept in step with the clock (--phase) */

.breath { --size: 260px; position: relative; width: var(--size); height: var(--size); flex: none; display: grid; place-items: center; }
.breath > * { animation-delay: var(--phase, 0s) !important; }
.breath .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) calc(18% - var(--k) * 5%), transparent); animation: ring 10s ease-in-out infinite; }
.breath .core { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--accent) 5%, transparent)); animation: core 10s ease-in-out infinite; }
.breath .say { position: relative; grid-area: 1 / 1; font-size: max(15px, calc(var(--size) * .066)); font-weight: 500; color: rgba(255, 255, 255, .85); animation: 10s linear infinite; }
.breath .say.in { animation-name: say-in; }
.breath .say.out { animation-name: say-out; }
@keyframes core { 0%, 100% { transform: scale(.6); } 50% { transform: scale(1); } }
@keyframes ring { 0%, 100% { transform: scale(calc(.75 + var(--k) * .12)); } 50% { transform: scale(calc(1 + var(--k) * .12)); } }
/* One word fades out before the other fades in, so they never sit on top of each other. */
@keyframes say-in { 0%, 44% { opacity: 1; } 48%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes say-out { 0%, 50% { opacity: 0; } 54%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
body.dimmed .breath > * { animation-play-state: paused; }

/* MARK: Buttons */

.play-btn {
  --size: 104px; width: var(--size); height: var(--size); flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--ink); font-size: calc(var(--size) * .34);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 0 24px color-mix(in srgb, var(--accent) 50%, transparent);
}
.play-btn.playing { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 0 48px color-mix(in srgb, var(--accent) 50%, transparent); }
.pill {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 99px; flex: none;
  background: rgba(255, 255, 255, .1); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.pill .i { font-size: 18px; }
.pill.health { background: color-mix(in srgb, var(--amber) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 60%, transparent); }
.pill.health .i { color: var(--amber); }
.pill.health.urgent { background: color-mix(in srgb, var(--urgent) 26%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--urgent) 60%, transparent); }
.pill.health.urgent .i { color: var(--urgent); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.soft-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 20px; border-radius: 99px;
  background: rgba(255, 255, 255, .1); font-size: 17px; font-weight: 600; white-space: nowrap;
}
.soft-btn:active { background: rgba(255, 255, 255, .18); }
.accent-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 26px; border-radius: 99px;
  background: var(--accent); color: rgba(0, 0, 0, .8); font-size: 18px; font-weight: 600; white-space: nowrap;
}
.link { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 15px; font-weight: 600; padding: 6px 0; }
.done-btn, .bar-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 18px; border-radius: 99px; font-size: 17px; font-weight: 600;
  background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.bar-btn { padding: 0 14px; }
.bar-btn .i { font-size: 20px; }
.text-btn { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .7); padding: 8px 12px; }
.playing-tag { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); padding: 5px 10px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 15%, transparent); flex: none; }

/* The waveform's bars brighten one after another while music plays. */
.i.wave-on path { animation: wave 1.2s ease-in-out infinite; }
.i.wave-on .w2 { animation-delay: .15s; } .i.wave-on .w3 { animation-delay: .3s; } .i.wave-on .w4 { animation-delay: .45s; } .i.wave-on .w5 { animation-delay: .6s; }
@keyframes wave { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
body.dimmed .i.wave-on path { animation-play-state: paused; }

/* MARK: Cards */

.glass {
  background: rgba(255, 255, 255, .08); border-radius: 28px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(28px) saturate(140%); backdrop-filter: blur(28px) saturate(140%);
}

/* MARK: Home: one column (phone, upright tablet) … */

#home { position: fixed; inset: 0; z-index: 1; }
#home.covered { visibility: hidden; }
.home-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; overscroll-behavior: contain; }
.home-inner {
  max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px;
  padding: calc(28px + var(--safe-top)) calc(36px + var(--safe-right)) calc(28px + var(--safe-bottom)) calc(36px + var(--safe-left));
  transition: padding-bottom .35s ease;
}
#home.mini-on .home-inner { padding-bottom: calc(100px + var(--safe-bottom)); }
.cols { display: flex; flex-direction: column; gap: 32px; }
.col { display: contents; }
.hero { order: 1; } .voice-card { order: 2; } .therapies { order: 3; } .howto { order: 4; }

/* … two columns on a wide landscape screen (iPad, laptop): Play now, voice and guidance left, therapies right. */
@media (min-width: 1000px) and (orientation: landscape) {
  .home-scroll { overflow: hidden; }
  .home-inner { max-width: none; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 24px;
                padding: calc(28px + var(--safe-top)) calc(40px + var(--safe-right)) calc(20px + var(--safe-bottom)) calc(40px + var(--safe-left)); }
  .cols { display: grid; grid-template-columns: 44% minmax(0, 1fr); gap: 28px; min-height: 0; }
  .col { display: flex; flex-direction: column; gap: 24px; overflow-y: auto; scrollbar-width: none; min-height: 0; padding-bottom: 12px; overscroll-behavior: contain; }
  .mini { display: none !important; }
  #home.mini-on .home-inner { padding-bottom: calc(20px + var(--safe-bottom)); }
}

/* Top bar */
.topbar { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.brand { display: flex; align-items: center; gap: 14px; flex: none; -webkit-user-select: none; cursor: default; touch-action: manipulation; }
.logo { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; font-size: 22px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-size: 26px; }
.brand-sub { font-size: 13px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; opacity: .7; }
.spacer { flex: 1; min-width: 4px; }
.ambient-btn { width: 44px; height: 44px; display: grid; place-items: center; font-size: 32px; }

/* Play now */
.hero {
  --pad: 32px; --clock: 64px; --greet: 18px; --play: 104px; --row-gap: 24px; --title: 40px; --raga: 24px; --detail: 15px; --vgap: 22px;
  padding: var(--pad); display: flex; flex-direction: column; gap: var(--vgap);
}
.hero-time .greet { font-size: var(--greet); color: rgba(255, 255, 255, .7); }
.hero-time .clock { font-size: var(--clock); line-height: 1.1; font-variant-numeric: tabular-nums; }
.divider { height: 1px; background: rgba(255, 255, 255, .15); margin: var(--vgap) 0; }
.hero-row { display: flex; align-items: center; gap: var(--row-gap); }
.hero-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.status { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .115em; text-transform: uppercase; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status .i { font-size: 16px; }
.status span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hero-title { font-size: var(--title); line-height: 1.1; }
.hero-raga { font-size: var(--raga); color: rgba(255, 255, 255, .85); }
.hero-detail { font-size: var(--detail); color: rgba(255, 255, 255, .7); }
.hero-seek { margin-top: -6px; }
.hero-error { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: rgba(255, 255, 255, .85); }
.hero-error .i { font-size: 18px; margin-top: 1px; }
.hero > div:empty { display: none; }

/* Voice and volume */
.voice-card { padding: 24px; display: flex; flex-direction: column; gap: 24px; }
.instruments { display: flex; gap: 12px; margin-top: 12px; }
.inst {
  flex: 1; min-width: 0; min-height: 64px; padding: 8px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: rgba(255, 255, 255, .1); container-type: inline-size;
}
.inst.selected { background: var(--accent); color: rgba(0, 0, 0, .8); }
.inst-name { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; }
.inst-feel { font-size: 12px; opacity: .75; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.feel-short { display: none; }
@container (max-width: 210px) { .feel-full { display: none; } .feel-short { display: inline; } }
.volume .section-title { margin-bottom: 10px; }
.vol-row { display: flex; align-items: center; gap: 14px; }
.vol-icon { font-size: 18px; opacity: .7; display: inline-flex; }
.volume.high .vol-loud { color: var(--warn); opacity: 1; }
.vol-hit { --level: .3; --warning: .5; --max: .85; position: relative; flex: 1; height: 36px; cursor: pointer; touch-action: none; }
.vol-track, .vol-fill { position: absolute; left: 0; top: 15px; height: 6px; border-radius: 3px; overflow: hidden; }
.vol-track { right: 0; background: rgba(255, 255, 255, .18); }
.vol-red { position: absolute; top: 0; bottom: 0; left: calc(var(--warning) * 100%); right: 0; background: color-mix(in srgb, var(--warn) 40%, transparent); }
.vol-fill { width: calc(var(--level) * 100%); background: var(--accent); }
.vol-fill-red { position: absolute; top: 0; bottom: 0; left: calc(var(--warning) / var(--level) * 100%); right: 0; background: var(--warn); }
.vol-max { position: absolute; top: 9px; width: 2px; height: 18px; left: calc(var(--max) * 100% - 1px); background: rgba(255, 255, 255, .85); border-radius: 1px; }
.vol-knob { position: absolute; top: 9px; width: 18px; height: 18px; margin-left: -9px; left: calc(var(--level) * 100%); border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .35); transition: width .15s, height .15s, top .15s, margin .15s; }
.volume.dragging .vol-knob { width: 24px; height: 24px; top: 6px; margin-left: -12px; }
.volume.high .vol-knob { box-shadow: inset 0 0 0 3px var(--warn), 0 1px 6px rgba(0, 0, 0, .35); }
.vol-pct { width: 48px; text-align: right; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .8); }
.volume.high .vol-pct { color: var(--warn); }
.vol-warn { display: none; margin-top: 10px; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; color: var(--warn); }
.volume.high .vol-warn { display: flex; }
.volume-hint { display: flex; gap: 10px; align-items: center; font-size: 15px; color: rgba(255, 255, 255, .75); }
.volume-hint .i { font-size: 20px; }

/* Seek bar */
.seek { width: 100%; }
.seek-hit { position: relative; height: 36px; cursor: pointer; touch-action: none; }
.seek-track { position: absolute; left: 0; right: 0; top: 16px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .18); overflow: hidden; transition: height .15s, top .15s; }
.seek-fill { height: 100%; width: 0; background: var(--accent); transition: width 1s linear; }
.seek-knob { position: absolute; top: 12px; width: 12px; height: 12px; margin-left: -6px; left: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); transition: left 1s linear, width .15s, height .15s, top .15s, margin .15s; }
.seek.dragging .seek-track { height: 8px; top: 14px; }
.seek.dragging .seek-knob { width: 22px; height: 22px; top: 7px; margin-left: -11px; transition: none; }
.seek.dragging .seek-fill { transition: none; }
.seek-labels { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .6); }
.seek-left { margin-top: 6px; text-align: center; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .75); font-weight: 500; }

/* Music therapies */
.therapies-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tile {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 140px; padding: 16px; border-radius: 24px;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  transition: transform .2s ease-out, opacity .2s, background-color .4s, box-shadow .4s;
}
.tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.tile-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); font-size: 22px; }
.tile-title { margin-top: auto; font-size: 20px; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile-sub { font-size: 12px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-sub.now { opacity: 1; color: var(--accent); font-weight: 600; }
.tile.current { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 85%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 30%, transparent); }
.tile.current .tile-icon { background: var(--accent); color: var(--ink); font-size: 18px; box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent); }

/* How to listen */
.howto { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.card-title { font-size: 26px; }
.point { display: flex; gap: 14px; align-items: flex-start; font-size: 17px; color: rgba(255, 255, 255, .88); }
.point .i { width: 28px; font-size: 20px; color: var(--accent); margin-top: 1px; }
.howto .link { font-size: 16px; padding-top: 4px; }

/* Mini player (one-column home, once Play now has scrolled away) */
.mini {
  position: fixed; z-index: 2; left: 50%; bottom: calc(10px + var(--safe-bottom)); width: min(560px, calc(100% - 32px));
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 99px;
  background: rgba(30, 32, 48, .55); -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15), 0 8px 24px rgba(0, 0, 0, .25);
  transform: translate(-50%, 140%); opacity: 0; pointer-events: none; transition: transform .35s ease, opacity .35s ease;
}
.mini.on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.mini:empty { display: none; }
.mini-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.mini-icon { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 16px; color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.mini-icon.on { background: var(--accent); color: var(--ink); }
.mini-text { display: flex; flex-direction: column; min-width: 0; }
.mini-title, .mini-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-title { font-size: 18px; }
.mini-sub { font-size: 13px; color: rgba(255, 255, 255, .7); }
.mini .play-btn { font-size: 16px; }

/* Sizes: a shorter landscape tablet (11-inch, laptops) … */
@media (min-width: 1000px) and (orientation: landscape) and (max-height: 999px) {
  .home-inner { gap: 18px; padding-top: calc(20px + var(--safe-top)); padding-left: calc(32px + var(--safe-left)); padding-right: calc(32px + var(--safe-right)); }
  .col { gap: 18px; }
  .hero { --pad: 22px; --clock: 44px; --greet: 15px; --play: 84px; --row-gap: 18px; --title: 30px; --raga: 19px; --detail: 13px; --vgap: 16px; }
  .voice-card { padding: 20px; gap: 14px; }
  .inst { min-height: 54px; }
  .inst-feel { font-size: 11px; }
  .volume .section-title { display: none; }
  .howto { padding: 20px; gap: 10px; }
  .card-title { font-size: 22px; }
  .point { font-size: 15px; } .point .i { font-size: 18px; }
  .howto .link { font-size: 15px; padding-top: 2px; }
}
/* … and a phone, held upright. */
@media (max-width: 599px) {
  .home-inner, .cols { gap: 20px; }
  .home-inner { padding: calc(16px + var(--safe-top)) 20px calc(16px + var(--safe-bottom)); }
  .topbar { gap: 8px; }
  .brand { gap: 10px; }
  .logo { width: 32px; height: 32px; font-size: 19px; }
  .brand-name { font-size: 22px; }
  .brand-sub { font-size: 11px; letter-spacing: .13em; }
  .pill { padding: 0 12px; }
  .hero { --pad: 20px; --clock: 38px; --greet: 15px; --play: 68px; --row-gap: 16px; --title: 25px; --raga: 18px; --detail: 13px; --vgap: 14px; }
  .status { font-size: 12px; letter-spacing: .08em; }
  .voice-card { padding: 18px; gap: 18px; }
  .inst { min-height: 54px; }
  .inst-feel { font-size: 11px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tile { min-height: 118px; padding: 14px; }
  .tile-icon { width: 36px; height: 36px; font-size: 20px; }
  .tile-title { font-size: 19px; }
  .howto { padding: 20px; gap: 10px; }
  .card-title { font-size: 22px; }
  .point { font-size: 15px; } .point .i { font-size: 18px; }
}

/* MARK: Full-screen layers */

.layer { position: fixed; inset: 0; visibility: hidden; opacity: 0; transition: opacity .35s ease, visibility 0s linear .35s; }
.layer.shown { visibility: visible; opacity: 1; transition: opacity .35s ease; }
/* A screen that is fading out lets taps through to the one appearing underneath. */
.layer:not(.shown) { pointer-events: none; }
.layer.fade-slow { transition-duration: 1.2s, 0s; transition-delay: 0s, 1.2s; }
.layer.fade-slow.shown { transition: opacity 1.2s ease; }
/* The room opens straight onto the welcome screen, without fading in. */
.booting .layer { transition: none !important; }
#welcome { z-index: 10; } #ambient { z-index: 20; } #category { z-index: 30; } #sheet { z-index: 40; } #breathe { z-index: 50; } #checkin { z-index: 60; } #notice { z-index: 70; }

/* Welcome: sized from one unit (--u), the screen's shorter side (more of the height on an upright phone). */
.welcome-body {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: calc(var(--u) * .045); padding: calc(32px + var(--safe-top)) 32px calc(32px + var(--safe-bottom));
}
.welcome-head { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .02); }
.welcome-logo { width: calc(var(--u) * .06); height: calc(var(--u) * .06); border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; font-size: calc(var(--u) * .036); }
.welcome-title { font-size: calc(var(--u) * .042); line-height: 1.15; }
.welcome-sub { font-size: max(14px, calc(var(--u) * .022)); color: rgba(255, 255, 255, .65); }
.welcome-clock { font-size: calc(var(--u) * .11); line-height: 1; font-variant-numeric: tabular-nums; }
.begin-card {
  display: flex; align-items: center; gap: calc(var(--u) * .03); text-align: left; max-width: 100%;
  padding: calc(var(--u) * .03) calc(var(--u) * .04); border-radius: 32px;
  background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.begin-play { width: calc(var(--u) * .12); height: calc(var(--u) * .12); flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: rgba(0, 0, 0, .75); font-size: calc(var(--u) * .04); box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 50%, transparent); }
.begin-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.begin-label { font-size: max(12px, calc(var(--u) * .018)); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.begin-title { font-size: calc(var(--u) * .045); line-height: 1.1; }
.begin-raga { font-size: max(15px, calc(var(--u) * .024)); color: rgba(255, 255, 255, .8); }
.welcome-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.welcome-actions .soft-btn { font-size: max(15px, calc(var(--u) * .02)); }
.upright-phone .welcome-body { padding-left: 20px; padding-right: 20px; }
.upright-phone .begin-card { width: 100%; max-width: 420px; }
.upright-phone .welcome-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 380px; gap: 12px; }

/* Ambient */
.amb-clock { position: absolute; top: calc(28px + var(--safe-top)); right: calc(36px + var(--safe-right)); font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .6); }
.amb-hint { position: absolute; left: 0; right: 0; bottom: calc(28px + var(--safe-bottom)); text-align: center; font-size: 15px; color: rgba(255, 255, 255, .45); pointer-events: none; }
.amb-center { position: absolute; inset: 0; padding: calc(56px + var(--safe-top)) 24px calc(76px + var(--safe-bottom)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * .06); text-align: center; transition: gap .8s ease; }
/* The circle gives way on short screens (a laptop, a tablet with its toolbar) so the text never meets the hint. */
.amb-breath .breath { --size: max(140px, min(calc(var(--u) * .45), calc(100dvh - 470px))); transition: width .8s ease, height .8s ease; }
#ambient.finished .amb-center { gap: calc(var(--u) * .04); }
#ambient.finished .amb-breath .breath { --size: max(110px, min(calc(var(--u) * .3), calc(100dvh - 560px))); }
.amb-info { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .018); }
.amb-names { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .018); text-align: center; }
.amb-category { font-size: calc(var(--u) * .06); line-height: 1.1; }
.amb-raga { font-size: max(18px, calc(var(--u) * .032)); color: var(--accent); display: inline-flex; align-items: center; gap: 10px; }
.amb-i { font-size: max(20px, calc(var(--u) * .026)); }
.amb-instrument { display: inline-flex; align-items: center; gap: 8px; font-size: max(15px, calc(var(--u) * .026)); font-weight: 500; color: rgba(255, 255, 255, .8); }
.amb-summary { max-width: calc(var(--u) * .7); font-size: max(15px, calc(var(--u) * .022)); color: rgba(255, 255, 255, .65); }
.amb-seek { width: max(240px, calc(var(--u) * .4)); margin-top: calc(var(--u) * .02 - var(--u) * .06 + var(--u) * .018); }
.amb-seek .seek-left { font-size: max(14px, calc(var(--u) * .024)); }
.amb-end { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .028); }
.amb-end-title { display: flex; flex-direction: column; gap: calc(var(--u) * .012); }
.amb-end-category { font-size: calc(var(--u) * .05); }
.amb-end-raga { font-size: max(18px, calc(var(--u) * .028)); color: var(--accent); }
.amb-ask { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .016); }
.amb-ask p { font-size: max(16px, calc(var(--u) * .026)); font-weight: 500; color: rgba(255, 255, 255, .85); }
.thumbs { display: flex; gap: calc(var(--u) * .04); }
.thumb { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.thumb-circle { --s: max(72px, calc(var(--u) * .09)); width: var(--s); height: var(--s); border-radius: 50%; display: grid; place-items: center; font-size: calc(var(--s) * .38); background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); transition: background .3s; }
.thumb.selected .thumb-circle { background: var(--accent); color: rgba(0, 0, 0, .8); box-shadow: none; }
.thumb.dim { opacity: .4; }
.thumb-label { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .75); }
.end-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: calc(var(--u) * .01); }
.end-actions .accent-btn, .end-actions .soft-btn { font-size: max(17px, calc(var(--u) * .022)); }
.upright-phone .end-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; gap: 12px; }

/* Category page, breathing (full-screen covers) */
.cover-bar { position: absolute; z-index: 2; top: calc(14px + var(--safe-top)); right: calc(20px + var(--safe-right)); }
.cover-scroll { position: absolute; inset: 0; }
.cat-inner { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; padding: calc(72px + var(--safe-top)) 40px calc(32px + var(--safe-bottom)); }
.cat-head { display: flex; flex-direction: column; gap: 16px; }
.cat-title-row { display: flex; align-items: center; gap: 22px; }
.cat-icon { width: 72px; height: 72px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 30px; background: var(--accent); color: rgba(0, 0, 0, .75); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 40%, transparent); }
.cat-title { font-size: 42px; line-height: 1.1; margin: 4px 0; }
.cat-summary { font-size: 15px; color: rgba(255, 255, 255, .7); }
.cat-intro { font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .85); max-width: 720px; }
.featured {
  display: flex; align-items: center; gap: 8px; padding: 28px; border-radius: 28px;
  background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.featured.current { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 80%, transparent); }
.featured-play { flex: 1; min-width: 0; display: flex; align-items: center; gap: 26px; text-align: left; }
.featured-circle { width: 96px; height: 96px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 34px; background: var(--accent); color: rgba(0, 0, 0, .75); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 50%, transparent); }
.featured-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.featured-name { font-size: 34px; line-height: 1.1; }
.featured-line { font-size: 15px; color: rgba(255, 255, 255, .75); }
.featured-summary { font-size: 14px; color: rgba(255, 255, 255, .7); }
.info-btn { width: 48px; height: 48px; flex: none; display: grid; place-items: center; font-size: 24px; color: rgba(255, 255, 255, .85); align-self: center; }
.raga-group { display: flex; flex-direction: column; gap: 14px; }
.group-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .85); }
.group-title .i { font-size: 18px; }
.raga-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.raga-card { display: flex; align-items: center; gap: 4px; padding: 16px; min-height: 88px; border-radius: 22px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.raga-card.current { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 70%, transparent); }
.raga-play { flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px; text-align: left; }
.raga-circle { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: var(--accent); background: rgba(255, 255, 255, .1); }
.raga-card.current .raga-circle { background: var(--accent); color: rgba(0, 0, 0, .75); }
.raga-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.raga-name { font-size: 23px; line-height: 1.15; }
.raga-inst { font-size: 14px; color: rgba(255, 255, 255, .65); }
.raga-summary { font-size: 13px; color: rgba(255, 255, 255, .65); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.usage-note { margin-top: 8px; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .05); display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.usage-note p:last-child { opacity: .7; }
.usage-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
@media (max-width: 700px) {
  .cat-inner { padding: calc(68px + var(--safe-top)) 20px calc(32px + var(--safe-bottom)); gap: 24px; }
  .cat-title-row { gap: 16px; }
  .cat-icon { width: 56px; height: 56px; font-size: 24px; }
  .cat-title { font-size: 32px; }
  .cat-intro { font-size: 16px; }
  .featured { padding: 20px; align-items: flex-start; }
  .featured-play { flex-direction: column; align-items: flex-start; gap: 14px; }
  .featured-circle { width: 64px; height: 64px; font-size: 26px; }
  .featured-name { font-size: 28px; }
  .raga-cards { grid-template-columns: minmax(0, 1fr); }
  .raga-card { padding: 14px; }
  .raga-play { gap: 14px; }
  .raga-circle { width: 46px; height: 46px; font-size: 18px; }
  .raga-name { font-size: 21px; }
}

/* Breathing */
.breathe-body { position: absolute; inset: 0; display: grid; place-items: center; padding: calc(32px + var(--safe-top)) 32px calc(32px + var(--safe-bottom)); text-align: center; }
.breathe-choose, .breathe-done { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .04); }
.breathe-done { gap: calc(var(--u) * .03); cursor: pointer; }
.breathe-icon { font-size: calc(var(--u) * .06); color: var(--accent); }
.breathe-icon .i { stroke-width: 1.4; }
.breathe-title { font-size: calc(var(--u) * .06); }
.breathe-text { max-width: min(calc(var(--u) * .7), 100%); font-size: max(16px, calc(var(--u) * .022)); color: rgba(255, 255, 255, .8); }
.minutes { display: flex; gap: 12px; width: 100%; max-width: 384px; }
.minute { flex: 1; max-width: 120px; height: 72px; border-radius: 22px; background: var(--accent); color: rgba(0, 0, 0, .8); font-size: 22px; font-weight: 600; white-space: nowrap; }
.breathe-running { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .05); }
.breathe-circle .breath { --size: calc(var(--u) * .5); }
.countdown { font-size: max(17px, calc(var(--u) * .03)); font-weight: 500; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .75); }

/* MARK: Sheets: reading pages, raga pages, insights, settings */

.sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); }
.sheet-panel {
  position: absolute; left: 50%; top: 50%; width: min(760px, calc(100vw - 48px)); height: min(92vh, 1100px); border-radius: 28px; overflow: hidden;
  transform: translate(-50%, -48%) scale(.98); transition: transform .35s ease; box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .1);
}
#sheet.shown .sheet-panel { transform: translate(-50%, -50%); }
.sheet-bar { position: absolute; z-index: 2; top: 14px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.sheet-bar > * { pointer-events: auto; }
.sheet-scroll { position: absolute; inset: 0; }
.sheet-content { max-width: 680px; margin: 0 auto; padding: 76px 28px 32px; display: flex; flex-direction: column; gap: 28px; }
@media (max-width: 700px) {
  .sheet-panel { left: 0; right: 0; top: calc(10px + var(--safe-top)); bottom: 0; width: auto; height: auto; border-radius: 22px 22px 0 0; transform: translateY(40px); }
  #sheet.shown .sheet-panel { transform: none; }
  .sheet-content { padding: 72px 22px calc(32px + var(--safe-bottom)); }
}

.reading-head { display: flex; flex-direction: column; gap: 12px; }
.reading-head h1 { font-size: 40px; line-height: 1.1; }
.reading-icon { font-size: 26px; color: var(--accent); }
.lead { font-size: 19px; line-height: 1.5; color: rgba(255, 255, 255, .8); }
.reading-section { display: flex; flex-direction: column; gap: 10px; }
.reading-section h2 { font-size: 26px; }
.reading-section p { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .85); -webkit-user-select: text; user-select: text; }
.explore-card { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 22px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); text-align: left; }
.explore-icon { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: var(--accent); color: rgba(0, 0, 0, .75); }
.explore-text { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: rgba(255, 255, 255, .75); }
.explore-text .serif { font-size: 24px; color: #fff; }
.chev { font-size: 16px; opacity: .55; }
.library-group { display: flex; flex-direction: column; gap: 12px; }
.library-group .group-title { font-size: 16px; }
.library-row { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 20px; background: rgba(255, 255, 255, .08); text-align: left; }
.library-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.library-name { font-size: 23px; }
.library-summary { font-size: 15px; color: rgba(255, 255, 255, .75); }
.library-uses { font-size: 13px; font-weight: 500; color: var(--accent); }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.fact { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .08); }
.fact > .i { font-size: 17px; color: var(--accent); width: 20px; }
.fact > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fact-title { font-size: 12px; font-weight: 600; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.fact-value { font-size: 15px; font-weight: 500; overflow-wrap: normal; }
.sheet-content > .accent-btn { align-self: flex-start; }
.med-note { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: rgba(255, 255, 255, .6); }
.med-note .i { margin-top: 1px; }
@media (max-width: 700px) {
  .reading-head h1 { font-size: 34px; }
  .lead { font-size: 18px; }
  .reading-section p { font-size: 17px; }
}

/* Insights */
.segments { display: flex; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, .1); }
.segments button { flex: 1; min-width: 0; padding: 7px 4px; border-radius: 9px; font-size: clamp(11.5px, 3.3vw, 14px); font-weight: 500; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255, 255, 255, .85); transition: background .2s; }
.segments button.on { background: rgba(255, 255, 255, .22); color: #fff; font-weight: 600; }
.stat-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.stat { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .07); min-width: 0; }
.stat-title { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-value { font-size: 32px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-note { font-size: 12px; color: rgba(255, 255, 255, .65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chart-card { padding: 20px; border-radius: 20px; background: rgba(255, 255, 255, .07); display: flex; flex-direction: column; gap: 12px; }
.chart-card h3 { font-size: 15px; font-weight: 600; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.readout { font-weight: 500; color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }
.chart { --h: 180px; padding-left: 28px; }
.chart-plot { position: relative; height: var(--h); }
.grid-line { position: absolute; left: 0; right: 0; bottom: calc(var(--y) * 100%); border-top: 1px solid rgba(255, 255, 255, .12); }
.grid-line span { position: absolute; left: -28px; top: -8px; width: 22px; text-align: right; font-size: 11px; color: rgba(255, 255, 255, .55); }
.chart-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.bar { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 0; }
.bar i { display: block; width: 100%; height: calc(var(--v) * 100%); min-height: 0; border-radius: 3px 3px 0 0; background: var(--accent); }
.chart-bars:hover .bar i { opacity: .45; }
.chart-bars .bar:hover i, .chart-bars .bar:focus-visible i { opacity: 1; }
.chart-axis { display: flex; gap: 2px; margin-top: 6px; font-size: 11px; color: rgba(255, 255, 255, .55); }
.chart-axis span { flex: 1; min-width: 0; white-space: nowrap; overflow: visible; }
.ranked { display: flex; flex-direction: column; gap: 10px; }
.ranked-text { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.ranked-text span:last-child { color: rgba(255, 255, 255, .65); font-variant-numeric: tabular-nums; white-space: pre; }
.ranked-track { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .12); margin-top: 4px; overflow: hidden; }
.ranked-track i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.export { display: flex; flex-wrap: wrap; gap: 12px; }
.export .soft-btn { font-size: 16px; }
#sheet[data-page="insights"] .sheet-content { max-width: 900px; }
@media (min-width: 700px) { #sheet[data-page="insights"] .sheet-panel { width: min(960px, calc(100vw - 48px)); } }

/* Settings */
.form-section { display: flex; flex-direction: column; gap: 8px; }
.form-section h2 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .6); padding: 0 16px; }
.form-group { border-radius: 16px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.form-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; padding: 10px 16px; width: 100%; text-align: left; }
.form-row + .form-row { box-shadow: inset 0 1px rgba(255, 255, 255, .08); }
.form-label { display: flex; flex-direction: column; gap: 2px; font-size: 16px; min-width: 0; }
.form-label small { font-size: 13px; color: rgba(255, 255, 255, .55); }
.form-value { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .6); font-size: 15px; text-align: right; }
.form-footer { font-size: 13px; color: rgba(255, 255, 255, .55); padding: 0 16px; line-height: 1.45; }
.action-row { color: var(--accent); font-weight: 500; }
.action-row.danger { color: var(--urgent); }
.action-row:disabled { opacity: .4; }
.form-row select, .form-row input[type="text"] {
  min-width: 0; max-width: 60%; padding: 8px 10px; border-radius: 10px; border: 0; background: rgba(255, 255, 255, .1); color: #fff; font-size: 15px;
  -webkit-user-select: text; user-select: text;
}
.form-row input[type="text"] { text-align: right; flex: 1; }
.form-row input[type="text"]::placeholder { color: rgba(255, 255, 255, .4); }
.form-row select option { color: #000; }
.slider-wrap { display: flex; align-items: center; gap: 12px; flex: 1; max-width: 60%; }
.slider-wrap input { flex: 1; accent-color: var(--accent); }
.slider-wrap output { width: 44px; text-align: right; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .7); }
.switch { -webkit-appearance: none; appearance: none; flex: none; width: 51px; height: 31px; border-radius: 99px; background: rgba(255, 255, 255, .2); position: relative; cursor: pointer; transition: background .2s; margin: 0; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); transition: transform .2s; }
.switch:checked { background: #34C759; }
.switch:checked::after { transform: translateX(20px); }
.switch:disabled { opacity: .4; cursor: default; }
.cat-row { justify-content: flex-start; }
.cat-row .form-label { flex: 1; }
.cat-row.hidden-cat .form-label, .cat-row.hidden-cat .cat-row-icon { opacity: .55; }
.cat-row-icon { width: 30px; font-size: 20px; color: var(--accent); display: grid; place-items: center; }
.row-tools { display: flex; align-items: center; gap: 2px; }
.tool { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; font-size: 18px; color: rgba(255, 255, 255, .8); }
.tool:disabled { opacity: .25; }
.tool.on { color: var(--accent); }
.link-row .chev { opacity: .5; }

/* PIN */
.pin-gate { display: flex; flex-direction: column; align-items: center; gap: 22px; padding-top: 12px; text-align: center; }
.pin-lock { font-size: 30px; color: rgba(255, 255, 255, .6); }
.pin-title { font-size: 20px; font-weight: 600; }
.pin-dots { display: flex; gap: 18px; }
.pin-dots i { width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, .2); transition: background .15s; }
.pin-dots i.on { background: #fff; }
.pin-message { min-height: 20px; font-size: 15px; color: var(--urgent); }
.keypad { display: grid; grid-template-columns: repeat(3, 80px); gap: 16px 18px; }
.key { width: 80px; height: 80px; border-radius: 50%; background: rgba(255, 255, 255, .1); font-size: 28px; font-weight: 500; display: grid; place-items: center; }
.key.del { background: none; font-size: 26px; }

/* MARK: Check-in and room-check notices */

.modal { background: rgba(0, 0, 0, .35); display: grid; place-items: center; padding: 24px; }
.modal-body { transform: scale(.95); transition: transform .4s ease; max-width: 100%; }
.modal.shown .modal-body { transform: none; }
.checkin-card, .notice-card {
  display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 28px; border-radius: 32px; text-align: center; max-width: 520px;
  background: rgba(40, 42, 60, .55); -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 20px 60px rgba(0, 0, 0, .35);
}
.checkin-card h2 { font-size: 26px; }
.feelings { display: flex; gap: 12px; }
.feeling { flex: 1; width: 140px; max-width: 140px; height: 104px; border-radius: 20px; background: rgba(255, 255, 255, .1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 15px; font-weight: 600; text-align: center; padding: 0 6px; }
.feeling .emoji { font-size: 40px; line-height: 1; }
.fine { font-size: 12px; color: rgba(255, 255, 255, .5); }
.notice-card h2 { font-size: 20px; font-weight: 600; }
.notice-card p { font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .85); }
@media (max-width: 480px) {
  .checkin-card { padding: 22px 16px; }
  .feelings { gap: 8px; }
  .feeling { font-size: 13px; height: 96px; }
}

/* MARK: Dimming (a web page can't change the screen brightness, so it darkens itself) */

#dim { position: fixed; inset: 0; z-index: 100; background: #000; opacity: 0; pointer-events: none; transition: opacity 2s ease; }
body.dimmed #dim { opacity: .85; }

/* MARK: Start-up */

.boot { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: linear-gradient(var(--top), var(--bottom)); color: rgba(255, 255, 255, .8); padding: 32px; text-align: center; }
.boot-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; padding: 32px; text-align: center; }
#print-report { display: none; }

@media (prefers-reduced-motion: reduce) {
  .bg i, .drift { animation: none !important; }
  .layer, .layer.shown, .press, .mini { transition-duration: .01s !important; }
}

/* MARK: Printed report (Export report → Save as PDF) */

@media print {
  @page { size: A4; margin: 14mm; }
  html, body { height: auto; overflow: visible; background: #fff !important; color: #1C1E2B; }
  body > *:not(#print-report) { display: none !important; }
  #print-report { display: flex !important; flex-direction: column; gap: 14px; --accent: #4B57C8; }
  #print-report h1 { font-size: 26px; color: #1C1E2B; }
  .report-sub { font-size: 12px; color: #5D6170; margin-top: -10px; }
  #print-report .stat-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  #print-report .stat { background: #F4F5F9; padding: 10px; }
  #print-report .stat-title, #print-report .stat-note { color: #5D6170; white-space: normal; }
  #print-report .stat-title { font-size: 10px; } #print-report .stat-note { font-size: 9px; }
  #print-report .stat-value { font-size: 22px; color: #1C1E2B; }
  #print-report .chart-card { background: #F4F5F9; padding: 12px; gap: 8px; break-inside: avoid; }
  #print-report .chart-card h3 { color: #1C1E2B; font-size: 13px; }
  #print-report .grid-line { border-color: #E3E5EC; }
  #print-report .grid-line span, #print-report .chart-axis { color: #5D6170; }
  #print-report .bar i, #print-report .ranked-track i { background: #4B57C8; }
  #print-report .ranked-track { background: #E3E5EC; height: 5px; }
  #print-report .ranked-text { font-size: 10px; color: #1C1E2B; }
  #print-report .ranked-text span:last-child { color: #5D6170; }
  .report-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .report-foot { font-size: 8px; color: #5D6170; }
  #print-report * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}