/* ════════════════════════════════════════════════════════════
   echo.||  —  canonical app  ·  LIGHT (Cloud Dancer) + depth
   Brand: #E9E9E7 canvas · #161616 ink · #2C5BD0 azure · Geist
   3D glass · large accessible type · Apple-store ready
   ════════════════════════════════════════════════════════════ */
/* Font @imports moved to async <link> tags in index.html: as @imports they
   serialized behind this file's download, render-blocked first paint, and
   held DOMContentLoaded hostage to two third-party CDNs. Every face below
   falls back cleanly to the system stack while the webfonts stream in. */

:root{
  --bg:#E9E9E7;
  --bg-2:#F1F1EF;
  --surface:#FFFFFF;
  --ink:#161616;
  --ink-2:#2B2B2B;
  --muted:rgba(22,22,22,.64);
  --faint:rgba(22,22,22,.46);
  --line:rgba(22,22,22,.12);
  --line-2:rgba(22,22,22,.07);
  --azure:#3E80B0;          /* Sky — soft, legible accent for text/icons */
  --azure-soft:#6FAAD2;
  --azure-pale:#CFF6FF;     /* Pale Sky — glows & highlights */
  --azure-ink:#FFFFFF;
  --azure-tint:rgba(62,128,176,.12);
  --ui:'Geist Variable','Geist',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:'Geist Mono Variable','Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --serif:'Newsreader',Georgia,serif;
  /* glass */
  --glass:rgba(255,255,255,.58);
  --glass-strong:rgba(255,255,255,.78);
  --glass-hair:rgba(255,255,255,.9);
  --shadow-sm:0 1px 2px rgba(22,22,22,.05),0 4px 14px -6px rgba(22,22,22,.14);
  --shadow-md:0 2px 6px rgba(22,22,22,.06),0 18px 40px -18px rgba(22,22,22,.28);
  --shadow-lg:0 30px 70px -30px rgba(22,22,22,.42),0 6px 18px -10px rgba(22,22,22,.2);
  /* tweakable: imagery treatment + hero fade colour */
  --img-filter:grayscale(1) contrast(1.05) brightness(.85);
  --hero-fade:rgba(233,233,231,.7);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background:
    radial-gradient(60% 40% at 12% -6%, rgba(44,91,208,.07), transparent 60%),
    radial-gradient(56% 44% at 96% 106%, rgba(110,150,240,.08), transparent 62%),
    var(--bg);
  font-family:var(--ui);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;display:flex;align-items:flex-start;justify-content:center;gap:54px;flex-wrap:wrap;padding:54px 40px 90px;
  letter-spacing:-.01em;
}
.stage{display:flex;flex-direction:column;align-items:center;gap:18px;}
.stage-label{font-family:var(--mono);font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--faint);}

/* ───────── device shell ───────── */
.device{position:relative;width:393px;height:852px;border-radius:54px;overflow:hidden;background:var(--bg);
  box-shadow:0 60px 130px -34px rgba(22,22,22,.45),0 0 0 1px rgba(22,22,22,.08),0 0 0 12px #fff,0 0 0 13px #d9d9d6,0 0 0 14px rgba(22,22,22,.18);}
.view{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;background:transparent;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.view::-webkit-scrollbar{display:none;}
.view[hidden]{display:none;}
/* science opened as an overlay sheet from the player — fully opaque, full viewport, scrolls independently; the player beneath is visibility:hidden (audio keeps playing) */
.view.as-sheet{z-index:110;background:var(--bg);transform:translateY(100%);transition:transform .44s cubic-bezier(.2,.7,.2,1);
  box-shadow:0 -34px 90px -34px rgba(0,0,0,.5);}
.view.as-sheet.in{transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ .view.as-sheet{transition:none;} }

/* ───────── persistent chrome ───────── */
.chrome{position:absolute;left:0;right:0;top:0;z-index:60;transition:background .3s,backdrop-filter .3s,border-color .3s,box-shadow .3s;border-bottom:1px solid transparent;}
.device[data-screen="home"]:not(.scrolled) .chrome{background:transparent;}
.device:not([data-screen="home"]) .chrome,
.device.scrolled .chrome{
  background:rgba(233,233,231,.72);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);
  border-bottom:1px solid transparent;box-shadow:none;}
/* soft bottom fade so content scrolls under the header instead of hard-clipping at its edge */
.chrome::after{content:'';position:absolute;left:0;right:0;top:100%;height:22px;pointer-events:none;opacity:0;transition:opacity .3s;
  background:linear-gradient(180deg, rgba(233,233,231,.72) 0%, rgba(233,233,231,.34) 42%, rgba(233,233,231,0) 100%);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent);}
.device:not([data-screen="home"]) .chrome::after,
.device.scrolled .chrome::after{opacity:1;}

.statusbar{height:52px;padding:18px 32px 0;display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:15px;color:var(--ink);}
.device[data-screen="home"]:not(.scrolled) .statusbar{color:#fff;}
.sb-icons{display:flex;align-items:center;gap:7px;}

.appheader{height:56px;padding:0 18px 6px;display:flex;align-items:center;justify-content:space-between;}
.wordmark{display:inline-flex;align-items:flex-end;gap:0;font-weight:600;font-size:21px;letter-spacing:-.4px;color:var(--ink);}
.device[data-screen="home"]:not(.scrolled) .wordmark{color:#fff;}
.wordmark .mk{display:inline-flex;align-items:flex-end;gap:3px;padding-bottom:6px;margin-left:3px;}
/* Logo color logic: Ink (#161616) on light/Cloud-Dancer, white on dark (obsidian --ink is near-white, so var(--ink) follows automatically). */
.wordmark .mk i{width:2.6px;height:16px;border-radius:2px;background:var(--ink);display:block;}
.device[data-screen="home"]:not(.scrolled) .wordmark .mk i{background:#fff;box-shadow:0 0 10px rgba(255,255,255,.7);}
.hgroup{display:flex;align-items:center;gap:10px;}

/* glass icon buttons — apple liquid look */
.iconbtn{width:44px;height:44px;border-radius:50%;flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink);
  background:var(--glass);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid var(--glass-hair);box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.8);transition:transform .15s,background .18s;overflow:hidden;}
.iconbtn:hover{background:var(--glass-strong);}
.iconbtn:active{transform:scale(.9);}
.device[data-screen="home"]:not(.scrolled) .iconbtn{color:#fff;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);box-shadow:0 6px 20px -8px rgba(0,0,0,.4);}
.avatar{padding:0;}
.avatar img{width:100%;height:100%;object-fit:cover;}

/* calm-reset pulse (apple-safe grounding) */
.resetbtn{position:relative;width:44px;height:44px;border-radius:50%;flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--azure);background:var(--glass);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid var(--glass-hair);box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.8);transition:transform .15s,background .18s;}
.resetbtn:hover{background:var(--glass-strong);}
.resetbtn:active{transform:scale(.9);}
/* Over the hero, the Pulse must read on ANY imagery: darker glass backdrop + blur + lift. */
.device[data-screen="home"]:not(.scrolled) .resetbtn{color:#fff;background:rgba(14,16,24,.36);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-color:rgba(255,255,255,.6);box-shadow:0 6px 18px -6px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.28);}
.device[data-screen="home"]:not(.scrolled) .resetbtn svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));}
/* ring only while pressed — no permanent halo */
.resetbtn::before{content:'';position:absolute;inset:-1px;border-radius:50%;border:1.5px solid var(--azure);opacity:0;transform:scale(1);transition:opacity .2s;}
.device[data-screen="home"]:not(.scrolled) .resetbtn::before{border-color:#fff;}
.resetbtn:active::before{opacity:.7;animation:ring .5s ease-out;}
@keyframes ring{0%{transform:scale(1);opacity:.6;}100%{transform:scale(1.7);opacity:0;}}

/* ───────── shared ───────── */
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--azure);display:flex;align-items:center;gap:9px;}
.kicker::before{content:'';width:16px;height:1px;background:var(--azure);opacity:.7;}
.seclabel{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);}
.screen-title{font-size:30px;font-weight:600;letter-spacing:-.9px;line-height:1.02;}
.screen-sub{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--muted);margin-top:6px;}
.glass{background:var(--glass);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--glass-hair);box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.7);}
.card{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);}

/* back row */
.backrow{display:flex;align-items:center;gap:13px;}
.backbtn{width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .15s;}
.backbtn:active{transform:scale(.9);}

/* ═══════════ SIGNAL / HOME ═══════════ */
.hero{position:relative;width:100%;height:520px;overflow:hidden;background:#0c0c0d;}
.hero video,.hero .hero-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;filter:grayscale(1) contrast(1.05) brightness(.96);}
.hero-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(10,10,11,.55) 0%, rgba(10,10,11,.08) 22%, rgba(10,10,11,0) 44%, rgba(10,10,11,.34) 70%, var(--hero-fade) 93%, var(--bg) 100%);}
/* permanent strong bottom-up scrim behind the whole hero text block — holds 4.5:1 even on the brightest helmet frames */
.hero-scrim{position:absolute;left:0;right:0;bottom:0;height:66%;z-index:5;pointer-events:none;
  background:linear-gradient(180deg, rgba(8,9,12,0) 0%, rgba(8,9,12,.3) 34%, rgba(8,9,12,.66) 66%, rgba(8,9,12,.86) 100%);}
.hero-foot{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:0 24px 30px;}
.live{display:inline-flex;align-items:center;gap:8px;margin-bottom:13px;font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.82);}
.live i{width:7px;height:7px;border-radius:50%;background:var(--azure-pale);box-shadow:0 0 11px rgba(169,196,255,.95);animation:pulse 2.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.45;transform:scale(.8);}50%{opacity:1;transform:scale(1.18);}}
.greet h1{font-weight:300;font-size:46px;line-height:.98;letter-spacing:-1.4px;color:var(--azure-pale);text-shadow:0 2px 30px rgba(0,0,0,.45);}
.greet h1 b{font-weight:600;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.4);}
.greet .coord{margin-top:12px;font-family:'IBM Plex Mono',var(--mono);font-size:max(13px,.8rem);letter-spacing:.15em;color:rgba(255,255,255,.72);}

.content{padding:24px 18px calc(16px + env(safe-area-inset-bottom) + 74px + 24px);display:flex;flex-direction:column;gap:22px;margin-top:-2px;}
.intro{font-family:var(--serif);font-size:20px;line-height:1.5;color:var(--ink);text-wrap:pretty;}
.intro b{font-weight:500;}
.intro em{font-style:italic;color:var(--azure);}

/* big category cards (22 freqs → 2) */
.cats{display:flex;flex-direction:column;gap:16px;}
.cat{position:relative;display:block;width:100%;height:210px;border-radius:30px;overflow:hidden;cursor:pointer;text-align:left;border:none;padding:0;box-shadow:var(--shadow-lg);}
.cat-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.cat:hover .cat-bg{transform:scale(1.05);}
.cat-scrim{position:absolute;inset:0;background:
  linear-gradient(102deg, rgba(12,13,16,.72) 0%, rgba(12,13,16,.3) 52%, rgba(12,13,16,.05) 100%),
  linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 50%);}
.cat-glass{position:absolute;inset:0;border-radius:30px;border:1px solid rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.55);pointer-events:none;}
.cat-body{position:absolute;inset:0;z-index:3;padding:24px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;}
.cat-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:#fff;display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  padding:5px 11px;border-radius:99px;background:rgba(8,9,12,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.cat-tag .px{width:5px;height:5px;border-radius:50%;background:var(--azure-pale);box-shadow:0 0 8px rgba(169,196,255,.9);}
.cat-name{font-size:30px;font-weight:600;letter-spacing:-.8px;line-height:1;color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.4);}
.cat-meta{display:flex;align-items:center;gap:9px;margin-top:9px;font-size:13px;color:rgba(255,255,255,.86);}
.cat-chip{height:26px;padding:0 12px;border-radius:99px;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:#fff;
  background:rgba(255,255,255,.16);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.32);}
.cat-go{position:absolute;bottom:22px;right:22px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:4;
  background:rgba(255,255,255,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.4);color:#fff;transition:transform .2s,background .2s;}
.cat:hover .cat-go{background:#fff;color:var(--azure);transform:translateX(2px);}

/* resume + metric tiles */
.tonight{display:grid;grid-template-columns:1.25fr 1fr;gap:13px;align-items:stretch;}
.now{position:relative;border-radius:24px;padding:16px 72px 16px 16px;display:flex;flex-direction:column;min-height:152px;overflow:hidden;}
.now-col{display:flex;flex-direction:column;height:100%;gap:8px;min-width:0;}
.now .now-tag{font-family:var(--mono);font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--azure);display:flex;align-items:baseline;gap:7px;max-width:100%;}
.now .nt-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.now .nt-time{flex-shrink:0;white-space:nowrap;color:var(--ink);opacity:.82;}
/* in-progress: the Resume CTA carries the action, so the card is hidden and streak goes full-width */
.tonight.solo{grid-template-columns:1fr;}
.tonight.solo #resume-card{display:none;}
.now-text{margin-top:auto;}
.now h3{font-size:19px;font-weight:600;letter-spacing:-.4px;line-height:1.05;}
.now .now-meta{font-size:14px;color:var(--muted);margin-top:3px;}
.now-play{position:absolute;top:50%;right:14px;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--azure);color:#fff;border:none;box-shadow:0 10px 24px -8px rgba(44,91,208,.7);transition:transform .15s;z-index:2;}
.now-play:active{transform:translateY(-50%) scale(.9);}
/* progress bars — filled count = % of session completed (real data, no decoration) */
.now-prog{display:flex;align-items:flex-end;gap:3px;height:18px;margin-top:10px;}
.now-prog i{flex:1;height:100%;border-radius:2px;background:rgba(22,22,22,.12);transition:background .3s;}
.now-prog i.fill{background:var(--azure);}
.metric{border-radius:24px;padding:18px;display:flex;flex-direction:column;gap:4px;min-height:152px;justify-content:flex-start;}
.metric .mlab{font-family:var(--mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);}
.metric .mbig{font-size:42px;font-weight:300;letter-spacing:-2px;line-height:1;color:var(--ink);margin-top:2px;}
.metric .mbig b{font-weight:600;color:var(--azure);}
.metric .msub{font-size:14px;color:var(--muted);}
.metric .mlab{margin-bottom:2px;}

/* the science card */
.science{display:flex;align-items:center;gap:15px;padding:17px 18px;border-radius:22px;cursor:pointer;width:100%;text-align:left;}
.science .si{width:46px;height:46px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(180deg,var(--azure-soft),var(--azure));box-shadow:0 8px 20px -8px rgba(44,91,208,.6),inset 0 1px 0 rgba(255,255,255,.4);}
.science .st{flex:1;min-width:0;}
.science .st b{display:block;font-size:16px;font-weight:600;letter-spacing:-.2px;}
.science .st span{font-size:14px;color:var(--muted);}
.science .sarrow{color:var(--faint);}

/* disclaimer */
.disc{display:flex;align-items:flex-start;gap:11px;padding:15px;border-radius:16px;background:rgba(22,22,22,.03);border:1px solid var(--line);}
.disc svg{flex-shrink:0;color:var(--faint);margin-top:1px;}
.disc p{font-size:14px;line-height:1.55;color:var(--muted);}
.disc p b{color:var(--ink);}
.disc a{color:var(--azure);text-decoration:none;font-weight:600;}

/* ═══════════ LIBRARY ═══════════ */
.pad-top{padding-top:114px;}
.lib-head{padding:114px 22px 0;display:flex;flex-direction:column;gap:16px;}
.lib-head .htext{display:flex;flex-direction:column;}
.chips{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;padding:1px 0;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex-shrink:0;height:40px;padding:0 17px;border-radius:99px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:.16s;display:inline-flex;align-items:center;gap:7px;}
.chip .ct{font-family:var(--mono);font-size:10px;font-weight:700;color:#fff;background:var(--azure);border-radius:99px;padding:1px 7px;}
.chip.on{background:var(--azure);border-color:var(--azure);color:#fff;box-shadow:0 8px 20px -8px rgba(44,91,208,.55);}
.chip.on .ct{background:rgba(255,255,255,.25);}
.lib-note{font-family:var(--mono);font-size:11px;letter-spacing:.8px;color:var(--faint);text-transform:uppercase;}
/* Saved section — sits at the top of the Archive when the user has saved frequencies */
.saved-sec{padding:18px 16px 0;display:flex;flex-direction:column;gap:11px;}
.saved-sec[hidden]{display:none;}
.saved-lbl{margin:0;}
.saved-row{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:1px 0 4px;}
.saved-row::-webkit-scrollbar{display:none;}
.saved-card{flex-shrink:0;width:140px;position:relative;border-radius:18px;overflow:hidden;cursor:pointer;aspect-ratio:1/1.05;
  border:1px solid var(--line);background:#0c0d10;box-shadow:var(--shadow-md);text-align:left;padding:0;}
.saved-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.8);}
.saved-card .sc-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.25) 0%,rgba(5,5,5,.05) 38%,rgba(5,5,5,.85) 100%);}
.saved-card .sc-hz{position:absolute;top:11px;left:12px;z-index:2;font-family:var(--mono);font-size:9.5px;letter-spacing:.5px;color:#fff;opacity:.92;}
.saved-card .sc-name{position:absolute;left:12px;right:12px;bottom:11px;z-index:2;color:#fff;font-size:14px;font-weight:600;letter-spacing:-.3px;line-height:1.15;}
.saved-card .sc-rm{position:absolute;top:8px;right:8px;z-index:3;width:26px;height:26px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(8,9,12,.5);backdrop-filter:blur(6px);color:#fff;display:flex;align-items:center;justify-content:center;}
.saved-card .sc-rm:active{transform:scale(.9);}

/* save/share confirmation toast */
.echo-toast{position:absolute;left:50%;bottom:118px;transform:translateX(-50%) translateY(8px);z-index:130;
  background:var(--ink);color:#fff;font-family:var(--ui);font-size:13px;font-weight:500;letter-spacing:.1px;
  padding:11px 20px;border-radius:99px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;white-space:nowrap;}
.echo-toast[hidden]{display:none;}
.echo-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.nodegrid{padding:18px 16px 130px;display:grid;grid-template-columns:1fr 1fr;gap:13px;}
.node{position:relative;border-radius:22px;overflow:hidden;cursor:pointer;aspect-ratio:1/1.18;border:1px solid var(--line);background:#0c0d10;box-shadow:var(--shadow-md);text-align:left;padding:0;}
.node img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.82);transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.node:hover img{transform:scale(1.07);}
.node .nscrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.32) 0%,rgba(5,5,5,.03) 30%,rgba(5,5,5,.5) 64%,rgba(5,5,5,.92) 100%);}
.node .nring{position:absolute;inset:0;border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18);pointer-events:none;}
.node .ntick{position:absolute;width:11px;height:11px;border-color:rgba(255,255,255,.6);z-index:3;}
.node .ntick.tl{top:11px;left:11px;border-top:1px solid;border-left:1px solid;}
.node .nidx{position:absolute;top:12px;right:14px;z-index:3;font-family:var(--mono);font-size:9.5px;letter-spacing:1px;color:rgba(255,255,255,.7);}
.node .nhz{position:absolute;top:13px;left:30px;z-index:3;font-family:var(--mono);font-size:10px;letter-spacing:.5px;color:#fff;}
.node .ncore{position:absolute;top:13px;left:14px;z-index:3;width:7px;height:7px;border-radius:50%;background:var(--azure-pale);box-shadow:0 0 10px rgba(169,196,255,.95);}
.node .nbody{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:14px;display:flex;flex-direction:column;gap:4px;color:#fff;}
.node .nname{font-size:16px;font-weight:600;letter-spacing:-.3px;line-height:1.05;}
.node .nsub{font-size:11.5px;color:rgba(255,255,255,.74);}
.node .nlock{position:absolute;top:11px;right:12px;z-index:4;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(8,8,10,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.3);color:#fff;}
.node.locked img{filter:grayscale(1) contrast(1) brightness(.55);}

/* ═══════════ GALLERY ═══════════ */
.gal-head{padding:114px 22px 0;display:flex;flex-direction:column;gap:16px;}
.quote{margin:18px 16px 0;border-radius:24px;padding:24px;position:relative;overflow:hidden;color:#fff;box-shadow:var(--shadow-lg);}
.quote img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.7);}
.quote .qscrim{position:absolute;inset:0;background:linear-gradient(120deg,rgba(12,13,16,.78),rgba(12,13,16,.34));}
.quote .qbody{position:relative;z-index:2;}
.quote .qweek{font-family:var(--mono);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--azure-pale);}
.quote .qtext{font-family:var(--serif);font-size:25px;line-height:1.25;letter-spacing:-.3px;margin-top:12px;text-wrap:pretty;}
.quote .qtext em{font-style:italic;}
.seg{display:flex;gap:0;padding:4px;border-radius:15px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);width:fit-content;margin:18px 16px 0;}
.seg button{height:36px;padding:0 clamp(12px,4vw,18px);border-radius:11px;border:none;cursor:pointer;font-size:13px;font-weight:600;color:var(--muted);background:none;transition:.16s;white-space:nowrap;}
.seg button.on{background:var(--azure);color:#fff;box-shadow:0 6px 16px -8px rgba(44,91,208,.6);}
.galgrid{padding:16px 16px 130px;display:grid;grid-template-columns:1fr 1fr;gap:13px;}
.wp{position:relative;border-radius:20px;overflow:hidden;cursor:pointer;aspect-ratio:1/1.5;border:1px solid var(--line);background:#111;box-shadow:var(--shadow-md);}
.wp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.86);transition:transform .5s;}
.wp:hover img{transform:scale(1.05);}
.wp .wscrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.06) 42%,rgba(5,5,5,.72) 100%);}
.wp .wname{position:absolute;left:12px;bottom:12px;z-index:2;font-size:13.5px;font-weight:600;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6);}
.wp .wdl{position:absolute;right:11px;bottom:11px;z-index:2;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.4);color:#fff;}
.wp .wpro{position:absolute;top:11px;right:11px;z-index:2;height:24px;padding:0 8px;border-radius:99px;display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.92);color:var(--azure);font-size:9px;font-weight:800;letter-spacing:.5px;white-space:nowrap;max-width:calc(100% - 22px);}
.wp.locked img{filter:grayscale(1) contrast(1) brightness(.5);}
.wp .wlock{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.9);}

/* ═══════════ PROFILE ═══════════ */
.prof-head{padding:114px 22px 0;display:flex;align-items:center;gap:16px;}
.prof-back{position:absolute;top:62px;left:18px;z-index:5;}
.prof-av{width:64px;height:64px;border-radius:20px;overflow:hidden;flex-shrink:0;border:1px solid var(--line);box-shadow:var(--shadow-sm);}
.prof-av img{width:100%;height:100%;object-fit:cover;}
.prof-id h2{font-size:24px;font-weight:600;letter-spacing:-.6px;}
.prof-id .pmeta{font-family:var(--mono);font-size:11px;letter-spacing:.6px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:8px;}
.pro-pill{height:22px;padding:0 9px;border-radius:99px;display:inline-flex;align-items:center;gap:5px;background:var(--azure-tint);border:1px solid rgba(44,91,208,.3);color:var(--azure);font-size:10px;font-weight:700;letter-spacing:.5px;}

.prof-stats{padding:20px 18px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:11px;}
.pstat{border-radius:18px;padding:15px 13px;display:flex;flex-direction:column;gap:3px;}
.pstat .v{font-size:24px;font-weight:600;letter-spacing:-.8px;}
.pstat .v em{font-style:normal;font-size:12px;color:var(--muted);font-weight:500;}
.pstat .k{font-family:var(--mono);font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);}

.prof-sec{padding:24px 18px 0;}
.prof-sec.last{padding-bottom:130px;}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;}
.sec-head .link{font-size:12.5px;font-weight:600;color:var(--azure);cursor:pointer;}

/* AI agent panel */
.ai{border-radius:24px;padding:20px;position:relative;overflow:hidden;background:linear-gradient(150deg,#fff,#F3F6FF);border:1px solid rgba(44,91,208,.18);box-shadow:var(--shadow-md);}
.ai-top{display:flex;align-items:center;gap:11px;margin-bottom:14px;}
.ai-orb{width:40px;height:40px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;
  background:radial-gradient(circle at 35% 30%,var(--azure-soft),var(--azure));box-shadow:0 8px 20px -8px rgba(44,91,208,.6),inset 0 1px 0 rgba(255,255,255,.4);position:relative;}
.ai-orb::after{content:'';position:absolute;inset:-3px;border-radius:16px;border:1px solid rgba(44,91,208,.3);animation:ring 2.8s ease-out infinite;}
.ai-top .ai-meta b{display:block;font-size:14px;font-weight:600;letter-spacing:-.2px;}
.ai-top .ai-meta span{font-family:var(--mono);font-size:10px;letter-spacing:.8px;color:var(--muted);text-transform:uppercase;}
.ai-body p{font-size:14.5px;line-height:1.55;color:var(--ink-2);text-wrap:pretty;}
.ai-body p b{color:var(--azure);font-weight:600;}
.ai-rec{margin-top:14px;display:flex;flex-direction:column;gap:9px;}
.ai-recrow{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:14px;background:rgba(255,255,255,.7);border:1px solid var(--line);cursor:pointer;transition:.16s;}
.ai-recrow:hover{border-color:rgba(44,91,208,.4);}
.ai-recrow .arr{width:9px;height:9px;border-radius:50%;background:var(--azure);box-shadow:0 0 8px rgba(44,91,208,.6);flex-shrink:0;}
.ai-recrow .ari{flex:1;min-width:0;}
.ai-recrow .ari b{display:block;font-size:14px;font-weight:600;}
.ai-recrow .ari span{font-size:14px;color:var(--muted);}
.ai-recrow .arhz{font-family:var(--mono);font-size:11px;color:var(--azure);}
.ai-disc{font-size:12px;line-height:1.5;color:var(--faint);margin-top:14px;}

/* history rows */
.hist{display:flex;flex-direction:column;}
.hfeel{color:var(--azure);font-weight:600;}
.hrow{display:flex;align-items:center;gap:14px;padding:14px 2px;cursor:pointer;}
.hrow:not(:last-child){border-bottom:1px solid var(--line);}
.hthumb{width:46px;height:46px;border-radius:13px;overflow:hidden;flex-shrink:0;border:1px solid var(--line);position:relative;}
.hthumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);}
.hmid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.hname{font-size:14.5px;font-weight:600;}
.hsub{font-family:var(--mono);font-size:11px;letter-spacing:.4px;color:var(--muted);}
.hdur{font-family:var(--mono);font-size:11px;color:var(--faint);flex-shrink:0;text-align:right;}
.hdur b{display:block;color:var(--ink);font-size:13px;}

/* settings list */
.slist{display:flex;flex-direction:column;border-top:1px solid var(--line);}
.srow{display:flex;align-items:center;gap:14px;padding:16px 2px;border-bottom:1px solid var(--line);cursor:pointer;color:var(--ink);text-decoration:none;transition:opacity .2s;}
.srow:active{opacity:.6;}
.srow .sic{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--azure-tint);color:var(--azure);}
.srow .sname{flex:1;font-size:15px;font-weight:500;}
.srow .sval{font-family:var(--mono);font-size:11px;color:var(--muted);}
.srow .sarr{color:var(--faint);}

/* subscription card */
.sub{border-radius:22px;padding:20px;background:var(--ink);color:#fff;box-shadow:var(--shadow-lg);position:relative;overflow:hidden;}
.sub::before{content:'';position:absolute;top:-40%;right:-20%;width:70%;height:140%;background:radial-gradient(circle,rgba(110,150,240,.4),transparent 70%);}
.sub .sub-k{font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--azure-pale);position:relative;}
.sub h3{font-size:21px;font-weight:600;letter-spacing:-.4px;margin:8px 0 4px;position:relative;}
.sub p{font-size:14px;color:rgba(255,255,255,.74);position:relative;line-height:1.5;}
.sub .plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;position:relative;}
.plan{border-radius:14px;padding:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);cursor:pointer;transition:.16s;}
.plan.on{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5);}
.plan .pname{font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--azure-pale);}
.plan .pprice{font-size:20px;font-weight:600;margin-top:5px;}
.plan .pprice em{font-style:normal;font-size:12px;color:rgba(255,255,255,.6);font-weight:400;}
.plan .pnote{font-size:10.5px;color:rgba(255,255,255,.6);margin-top:3px;}
.sub .legal{font-size:12px;line-height:1.5;color:rgba(255,255,255,.5);margin-top:14px;position:relative;}
.sub .legal a{color:rgba(255,255,255,.8);text-decoration:none;}
.sub .legal .lk{display:flex;flex-wrap:wrap;gap:5px 12px;margin-top:8px;}

/* ═══════════ THE SCIENCE explainer (full screen) ═══════════ */
.sci-hero{position:relative;height:300px;overflow:hidden;}
.sci-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);}
.sci-hero .sh-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,.45) 0%,rgba(10,10,11,.1) 40%,rgba(233,233,231,.6) 90%,var(--bg) 100%);}
.sci-hero .sh-back{position:absolute;top:62px;left:18px;z-index:5;}
.sci-hero .sh-body{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:0 24px 22px;}
.sci-hero h1{font-size:34px;font-weight:600;letter-spacing:-1px;line-height:1;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.4);}
.sci-content{padding:24px 22px 130px;display:flex;flex-direction:column;gap:20px;}
.sci-lead{font-family:var(--serif);font-size:21px;line-height:1.5;color:var(--ink);text-wrap:pretty;}
.sci-lead em{font-style:italic;color:var(--azure);}
.sci-block{padding:20px;border-radius:20px;}
.sci-block .sb-k{font-family:var(--mono);font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--azure);margin-bottom:9px;display:flex;align-items:center;gap:8px;}
.sci-block h3{font-size:18px;font-weight:600;letter-spacing:-.3px;margin-bottom:8px;}
.sci-block p{font-size:14.5px;line-height:1.6;color:var(--ink-2);}
.sci-block p+p{margin-top:10px;}
.sci-eq{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;padding:22px;border-radius:20px;background:var(--ink);color:#fff;box-shadow:var(--shadow-md);}
.sci-eq .term{text-align:center;}
.sci-eq .term .t-hz{font-size:24px;font-weight:600;letter-spacing:-.5px;}
.sci-eq .term .t-ear{font-family:var(--mono);font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--azure-pale);margin-top:3px;}
.sci-eq .op{font-size:22px;font-weight:300;color:rgba(255,255,255,.5);}
.sci-eq .res .t-hz{color:var(--azure-pale);}

/* ── interactive binaural demo (keeps the dark equation-card language) ── */
.sci-demo{flex-direction:column;gap:16px;padding:20px;align-items:stretch;}
.sd-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.sd-eq{font-family:var(--mono);font-size:13px;letter-spacing:.4px;color:rgba(255,255,255,.7);display:inline-flex;align-items:center;gap:6px;}
.sd-eq .sd-dot{opacity:.5;}
.sd-eq .sd-arrow{color:rgba(255,255,255,.45);font-size:15px;margin:0 1px;}
.sd-eq b{color:var(--azure-pale);font-weight:600;}
.sd-phones{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.5);}
.sd-ears{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.sd-ear{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:3px;cursor:pointer;
  padding:15px 15px 16px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  color:#fff;text-align:left;min-height:44px;transition:transform .15s,background .2s,border-color .2s,box-shadow .2s;}
.sd-ear:active{transform:scale(.97);}
.sd-ear .sd-pan{position:absolute;top:13px;right:14px;font-family:var(--mono);font-size:11px;letter-spacing:1px;color:rgba(255,255,255,.4);transition:color .2s;}
.sd-ear .t-hz{font-size:23px;font-weight:600;letter-spacing:-.5px;}
.sd-ear .t-ear{font-family:var(--mono);font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.55);}
.sd-ear .sd-wave{display:flex;align-items:flex-end;gap:3px;height:14px;margin-bottom:4px;opacity:.25;transition:opacity .25s;}
.sd-ear .sd-wave i{width:3px;border-radius:2px;background:var(--azure-pale);height:5px;}
.sd-ear[aria-pressed="true"]{background:color-mix(in srgb, var(--azure) 26%, transparent);border-color:var(--azure-pale);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--azure-pale) 40%, transparent),0 10px 30px -12px var(--azure);}
.sd-ear[aria-pressed="true"] .sd-pan{color:var(--azure-pale);}
.sd-ear[aria-pressed="true"] .sd-wave{opacity:1;}
.sd-ear[aria-pressed="true"] .sd-wave i{animation:sdWave .9s ease-in-out infinite;}
.sd-ear[aria-pressed="true"] .sd-wave i:nth-child(2){animation-delay:.12s;}
.sd-ear[aria-pressed="true"] .sd-wave i:nth-child(3){animation-delay:.24s;}
.sd-ear[aria-pressed="true"] .sd-wave i:nth-child(4){animation-delay:.36s;}
.sd-ear[aria-pressed="true"] .sd-wave i:nth-child(5){animation-delay:.48s;}
@keyframes sdWave{0%,100%{height:4px;}50%{height:14px;}}
.sd-res{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 12px 6px;border-top:1px solid rgba(255,255,255,.1);}
.sd-res .sd-beat{font-size:30px;font-weight:600;letter-spacing:-1px;color:rgba(255,255,255,.34);transition:color .4s,text-shadow .4s,transform .4s;}
.sd-res .sd-cap{font-family:var(--mono);font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:rgba(255,255,255,.5);text-align:center;text-wrap:balance;min-height:13px;}
.sd-res.both .sd-beat{color:var(--azure-pale);transform:scale(1.04);
  text-shadow:0 0 18px color-mix(in srgb, var(--azure-pale) 75%, transparent),0 0 40px color-mix(in srgb, var(--azure-pale) 45%, transparent);
  animation:sdGlow 3.2s ease-in-out infinite;}
.sd-res.both .sd-cap{color:var(--azure-pale);}
@keyframes sdGlow{0%,100%{text-shadow:0 0 16px color-mix(in srgb, var(--azure-pale) 60%, transparent),0 0 34px color-mix(in srgb, var(--azure-pale) 30%, transparent);}50%{text-shadow:0 0 24px color-mix(in srgb, var(--azure-pale) 90%, transparent),0 0 52px color-mix(in srgb, var(--azure-pale) 55%, transparent);}}
@media (prefers-reduced-motion: reduce){ .sd-ear .sd-wave i,.sd-res.both .sd-beat{animation:none !important;} }

/* ── CIA Gateway exhibit: typewriter scan + redaction reveal (no insignia) ── */
.sci-exhibit{margin-top:16px;}
.ex-paper{position:relative;padding:16px 16px 18px;border-radius:6px;overflow:hidden;
  background:#efe9dd;color:#2c2823;border:1px solid #d8cfbc;
  box-shadow:0 14px 30px -16px rgba(40,34,24,.5),inset 0 1px 0 rgba(255,255,255,.5);
  background-image:repeating-linear-gradient(0deg, rgba(120,104,70,.05) 0 2px, transparent 2px 4px),radial-gradient(120% 80% at 80% -10%, rgba(150,130,90,.16), transparent 60%);}
.ex-paper::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.5;
  background:radial-gradient(140% 120% at 110% 10%, rgba(90,74,40,.22), transparent 55%),radial-gradient(120% 120% at -10% 110%, rgba(90,74,40,.18), transparent 50%);}
.ex-meta{position:relative;display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:8.5px;letter-spacing:.8px;color:#6b6049;border-bottom:1px solid #cabfa6;padding-bottom:7px;margin-bottom:11px;}
.ex-title{position:relative;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.5px;line-height:1.3;color:#241f18;margin-bottom:12px;}
.ex-line{position:relative;font-family:var(--mono);font-size:11px;line-height:1.7;color:#332e26;letter-spacing:.2px;}
.ex-line.dim{color:#8a7f66;}
.ex-line+.ex-line{margin-top:7px;}
.ex-reveal{position:relative;display:block;padding:1px 0;}
.ex-reveal .ex-text{color:#211c14;}
.ex-redact{position:absolute;inset:-2px -3px;background:#1a1712;border-radius:2px;display:flex;align-items:center;justify-content:center;
  transform:translateX(0);transition:transform 1.1s cubic-bezier(.6,.04,.2,1);box-shadow:0 1px 2px rgba(0,0,0,.4);}
.ex-redact-lbl{font-family:var(--mono);font-size:8px;letter-spacing:2px;color:rgba(255,255,255,.5);}
.sci-exhibit.reveal .ex-redact{transform:translateX(calc(100% + 14px));}
.ex-cap{display:block;margin-top:9px;font-family:var(--mono);font-size:9.5px;letter-spacing:.6px;color:var(--faint);}
@media (prefers-reduced-motion: reduce){ .sci-exhibit .ex-redact{transition:none;} }

.sci-cite{font-size:12px;line-height:1.55;color:var(--faint);}
.sci-cite b{color:var(--muted);}

/* ═══════════ tab bar ═══════════ */
.tabbar{position:absolute;left:14px;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:70;height:74px;border-radius:30px;display:flex;align-items:center;justify-content:space-around;padding:0 6px;
  background:rgba(255,255,255,.66);backdrop-filter:blur(30px) saturate(1.7);-webkit-backdrop-filter:blur(30px) saturate(1.7);
  border:1px solid var(--glass-hair);box-shadow:0 24px 54px -16px rgba(22,22,22,.34),inset 0 1px 0 rgba(255,255,255,.9);}
.tab{flex:1;min-height:58px;background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--faint);transition:color .18s;}
.tab .tlab{font-size:9.5px;font-weight:700;letter-spacing:.7px;}
.tab.on{color:var(--ink);}
.tab.on svg{color:var(--azure);}
.tab:active{transform:scale(.93);}

/* ═══════════ modals / overlays ═══════════ */
.scrim{position:absolute;inset:0;z-index:90;background:rgba(22,22,22,.32);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:flex-end;opacity:0;pointer-events:none;transition:opacity .3s;}
.scrim.open{opacity:1;pointer-events:auto;}
.sheet{position:relative;width:100%;max-height:84%;overflow-y:auto;scrollbar-width:none;border-radius:30px 30px 0 0;padding:10px 22px 30px;
  background:var(--bg);border:1px solid var(--glass-hair);border-bottom:none;box-shadow:0 -30px 70px -20px rgba(22,22,22,.4);transform:translateY(24px);transition:transform .32s cubic-bezier(.2,.8,.2,1);}
.sheet::-webkit-scrollbar{display:none;}
.scrim.open .sheet{transform:translateY(0);}
.sheet .grab{width:38px;height:4px;border-radius:99px;background:rgba(22,22,22,.18);margin:0 auto 18px;}
.sheet-x{position:absolute;top:16px;right:18px;width:34px;height:34px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--line);color:var(--ink);box-shadow:var(--shadow-sm);}

/* calm reset full overlay */
.resetscrim{position:absolute;inset:0;z-index:95;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 34px;
  background:radial-gradient(80% 60% at 50% 38%, #1a2740, #0a0e18 78%);opacity:0;pointer-events:none;transition:opacity .45s;}
.resetscrim.open{opacity:1;pointer-events:auto;}
.breath{position:relative;width:200px;height:200px;display:flex;align-items:center;justify-content:center;margin-bottom:34px;}
.breath .bcore{width:104px;height:104px;border-radius:50%;background:radial-gradient(circle at 50% 38%,rgba(169,196,255,.6),rgba(110,150,240,.1) 70%);border:1px solid rgba(169,196,255,.5);box-shadow:0 0 60px rgba(110,150,240,.45);}
.breath .bring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(169,196,255,.3);}
.breath.run .bcore,.breath.run .bring{animation:breathe 19s ease-in-out infinite;}
@keyframes breathe{0%{transform:scale(.55);}21%{transform:scale(1);}58%{transform:scale(1);}100%{transform:scale(.55);}}
.reset-kick{font-family:var(--mono);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--azure-pale);}
.resetscrim h2{font-size:30px;font-weight:300;letter-spacing:-1px;margin:14px 0 12px;color:#fff;}
.resetscrim h2 b{font-weight:600;}
.resetscrim p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.7);max-width:290px;}
.reset-cue{font-family:var(--mono);font-size:14px;letter-spacing:2px;text-transform:uppercase;color:#fff;margin-top:28px;min-height:22px;}
.reset-timer{font-family:var(--mono);font-size:13px;letter-spacing:1px;color:var(--azure-pale);margin-top:8px;}
.reset-actions{display:flex;gap:10px;margin-top:30px;}
.reset-btn{height:50px;padding:0 26px;border-radius:99px;cursor:pointer;font-size:14px;font-weight:600;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);transition:.18s;}
.reset-btn.solid{background:var(--azure-pale);color:#0a0e18;border-color:var(--azure-pale);}
.reset-btn:hover{background:rgba(255,255,255,.18);}
.reset-btn.solid:hover{background:#fff;}

.legal{font-size:12px;line-height:1.6;color:var(--faint);}
.legal a{color:var(--azure);text-decoration:none;font-weight:600;}
.legal .lk{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;}

/* ───────── annotation ───────── */
.flowcard{width:330px;align-self:flex-start;margin-top:34px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:var(--shadow-sm);}
.flowcard .fc-mark{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--azure);}
.flowcard h3{font-size:21px;font-weight:600;letter-spacing:-.5px;margin:8px 0 18px;}
.flowstep{display:flex;gap:13px;padding:11px 0;}
.flowstep:not(:last-child){border-bottom:1px solid var(--line);}
.flowstep .n{width:24px;height:24px;border-radius:7px;flex-shrink:0;background:var(--azure-tint);border:1px solid rgba(44,91,208,.3);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--azure);}
.flowstep p{font-size:13.5px;line-height:1.5;color:var(--ink-2);}
.flowstep p b{color:var(--ink);font-weight:600;}
.flowcard .note{margin-top:16px;font-size:13px;line-height:1.5;color:var(--muted);}

/* ═══════════════════════════════════════════════════════════
   TWEAKS — expressive feel controls (atmosphere / imagery / accent)
   All scoped to .device so they re-skin the whole instrument.
   ═══════════════════════════════════════════════════════════ */

/* ── Atmosphere ── */
.device[data-atmos="twilight"]{
  --bg:#E4E1EA;--bg-2:#ECEAF1;--surface:#FBFAFE;--ink:#211F2B;--ink-2:#39354A;
  --muted:rgba(33,31,43,.64);--faint:rgba(33,31,43,.46);--line:rgba(33,31,43,.12);--line-2:rgba(33,31,43,.07);
  --glass:rgba(255,255,255,.5);--glass-strong:rgba(255,255,255,.72);--glass-hair:rgba(255,255,255,.82);
  --hero-fade:rgba(228,225,234,.7);
}
.device[data-atmos="twilight"]{
  background:
    radial-gradient(60% 40% at 12% -6%, rgba(106,69,201,.1), transparent 60%),
    radial-gradient(56% 44% at 96% 106%, rgba(44,91,208,.1), transparent 62%),
    var(--bg);
}
.device[data-atmos="obsidian"]{
  --bg:#09090B;--bg-2:#101015;--surface:#16161C;--ink:#F2EFE9;--ink-2:#D8D5CE;
  --muted:rgba(242,239,233,.66);--faint:rgba(242,239,233,.46);--line:rgba(242,239,233,.13);--line-2:rgba(242,239,233,.06);
  --glass:rgba(255,255,255,.06);--glass-strong:rgba(255,255,255,.11);--glass-hair:rgba(255,255,255,.15);
  --hero-fade:rgba(9,9,11,.6);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5),0 4px 14px -6px rgba(0,0,0,.7);
  --shadow-md:0 2px 6px rgba(0,0,0,.55),0 18px 40px -18px rgba(0,0,0,.75);
  --shadow-lg:0 30px 70px -30px rgba(0,0,0,.85),0 6px 18px -10px rgba(0,0,0,.6);
}
.device[data-atmos="obsidian"]{
  background:
    radial-gradient(60% 42% at 12% -6%, rgba(143,182,255,.1), transparent 60%),
    radial-gradient(56% 44% at 96% 106%, rgba(110,150,240,.09), transparent 62%),
    var(--bg);
}
/* in obsidian the chrome glass should be dark, not light */
.device[data-atmos="obsidian"]:not([data-screen="home"]) .chrome,
.device[data-atmos="obsidian"].scrolled .chrome{
  background:rgba(12,12,15,.66);box-shadow:0 1px 0 rgba(255,255,255,.04);
}
.device[data-atmos="obsidian"] .tabbar{
  background:rgba(20,20,26,.62);box-shadow:0 24px 54px -16px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06);
}
.device[data-atmos="obsidian"] .sheet{background:var(--bg-2);}
.device[data-atmos="obsidian"] .ai{background:linear-gradient(150deg,#15151b,#181d2c);}
.device[data-atmos="obsidian"] .ai-recrow{background:rgba(255,255,255,.05);}
.device[data-atmos="obsidian"] .backbtn,
.device[data-atmos="obsidian"] .chip,
.device[data-atmos="obsidian"] .seg,
.device[data-atmos="obsidian"] .sheet-x{background:var(--surface);}

/* ── Accent (whole-system recolour) ── */
.device[data-accent="sky"]{--azure:#3E80B0;--azure-soft:#6FAAD2;--azure-pale:#CFF6FF;--azure-tint:rgba(62,128,176,.12);}
.device[data-accent="steel"]{--azure:#56789C;--azure-soft:#88A4C2;--azure-pale:#B0C4DE;--azure-tint:rgba(86,120,156,.12);}
.device[data-accent="slate"]{--azure:#687889;--azure-soft:#93A2B2;--azure-pale:#C2CCD6;--azure-tint:rgba(104,120,137,.12);}
.device[data-accent="butter"]{--azure:#927611;--azure-soft:#CDB04A;--azure-pale:#EFDE9C;--azure-tint:rgba(146,118,17,.12);}
/* legacy key → Sky */
.device[data-accent="azure"]{--azure:#3E80B0;--azure-soft:#6FAAD2;--azure-pale:#CFF6FF;--azure-tint:rgba(62,128,176,.12);}
/* keep accents legible on obsidian: lift the base hue */
.device[data-atmos="obsidian"][data-accent="sky"],
.device[data-atmos="obsidian"][data-accent="azure"]{--azure:#8FC9EE;}
.device[data-atmos="obsidian"][data-accent="steel"]{--azure:#A6C0DD;}
.device[data-atmos="obsidian"][data-accent="slate"]{--azure:#AEBCC9;}
.device[data-atmos="obsidian"][data-accent="butter"]{--azure:#E2C766;}

/* ── Imagery treatment (every photo + video) ── */
.device[data-img="azure"]{--img-filter:grayscale(1) brightness(.92) sepia(1) hue-rotate(176deg) saturate(2.6) contrast(1.04);}
.device[data-img="ink"]{--img-filter:grayscale(1) contrast(1.42) brightness(.64);}
.device[data-img] .hero video,
.device[data-img] .hero .hero-fallback,
.device[data-img] .cat-bg,
.device[data-img] .node img,
.device[data-img] .wp img,
.device[data-img] .quote img,
.device[data-img] .hthumb img,
.device[data-img] .sci-hero img{filter:var(--img-filter);}
.device[data-img] .node.locked img,
.device[data-img] .wp.locked img{filter:var(--img-filter) brightness(.62);}

/* ═══════════ Tweaks panel (vanilla, host-protocol wired) ═══════════ */
.twk{position:fixed;right:18px;bottom:18px;z-index:2147483646;width:268px;
  background:rgba(250,250,249,.82);color:#161616;
  -webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);
  border:.5px solid rgba(255,255,255,.7);border-radius:18px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 18px 50px -12px rgba(22,22,22,.34);
  font-family:var(--ui);overflow:hidden;}
.twk[hidden]{display:none;}
.twk-hd{display:flex;align-items:center;justify-content:space-between;padding:13px 12px 12px 16px;cursor:move;user-select:none;border-bottom:.5px solid rgba(22,22,22,.08);}
.twk-hd b{font-size:13px;font-weight:600;letter-spacing:-.2px;}
.twk-hd .twk-dot{display:inline-flex;align-items:center;gap:7px;}
.twk-hd .twk-dot i{width:6px;height:6px;border-radius:50%;background:#2C5BD0;box-shadow:0 0 8px rgba(44,91,208,.7);}
.twk-x{appearance:none;border:0;background:transparent;color:rgba(22,22,22,.5);width:24px;height:24px;border-radius:7px;cursor:pointer;font-size:14px;line-height:1;}
.twk-x:hover{background:rgba(22,22,22,.07);color:#161616;}
.twk-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:15px;}
.twk-row{display:flex;flex-direction:column;gap:8px;}
.twk-lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:rgba(22,22,22,.5);}
.twk-seg{position:relative;display:flex;padding:3px;border-radius:11px;background:rgba(22,22,22,.06);}
.twk-seg button{appearance:none;flex:1;border:0;background:transparent;color:rgba(22,22,22,.6);font-family:var(--ui);font-size:11.5px;font-weight:600;min-height:30px;border-radius:8px;cursor:pointer;transition:color .15s;padding:0 4px;}
.twk-seg button.on{background:#fff;color:#161616;box-shadow:0 1px 3px rgba(22,22,22,.16);}
.twk-chips{display:flex;gap:8px;}
.twk-chip{position:relative;appearance:none;flex:1;height:42px;border:0;border-radius:11px;cursor:pointer;overflow:hidden;
  box-shadow:0 0 0 .5px rgba(22,22,22,.14),0 1px 3px rgba(22,22,22,.1);transition:transform .12s,box-shadow .12s;}
.twk-chip:hover{transform:translateY(-1px);}
.twk-chip.on{box-shadow:0 0 0 2px #161616,0 2px 8px rgba(22,22,22,.2);}
.twk-chip svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));}

/* ═══════════ SPLASH / boot sequence ═══════════ */
.splash{position:absolute;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(60% 40% at 12% -6%, rgba(44,91,208,.07), transparent 60%),
    radial-gradient(56% 44% at 96% 106%, rgba(110,150,240,.08), transparent 62%),
    var(--bg);
  opacity:1;transition:opacity .9s cubic-bezier(.4,0,.2,1);}
.splash[hidden]{display:none;}
.splash.hide{opacity:0;pointer-events:none;}
.splash-mark{display:flex;flex-direction:column;align-items:center;gap:24px;animation:splashRise 1s cubic-bezier(.2,.7,.2,1) both;}
.splash-word{display:inline-flex;align-items:flex-end;font-family:var(--ui);font-weight:600;font-size:46px;letter-spacing:-1.4px;color:var(--ink);
  opacity:0;animation:splashWord .7s ease .12s both;}
.splash-mk{display:inline-flex;align-items:flex-end;gap:7px;padding-bottom:12px;margin-left:8px;}
.splash-mk i{width:4px;border-radius:3px;background:var(--ink);display:block;transform-origin:bottom;transform:scaleY(0);opacity:0;}
/* Two equal bars — a balanced "||" mark (staggered rise, same length). */
.splash-mk i:nth-child(1){height:44px;animation:splashBar .6s cubic-bezier(.2,.8,.2,1) .34s both;}
.splash-mk i:nth-child(2){height:44px;animation:splashBar .6s cubic-bezier(.2,.8,.2,1) .5s both;}
.splash-meter{width:66px;height:2px;border-radius:2px;background:rgba(22,22,22,.12);overflow:hidden;position:relative;}
.device[data-atmos="obsidian"] .splash-meter{background:rgba(255,255,255,.16);}
.splash-meter::after{content:'';position:absolute;inset:0;background:var(--ink);transform:translateX(-100%);animation:splashMeter 1.5s cubic-bezier(.5,0,.2,1) .55s both;}
.splash-tag{font-family:var(--mono);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--faint);opacity:0;animation:splashWord .7s ease .72s both;}
@keyframes splashRise{from{transform:scale(.93);}to{transform:scale(1);}}
@keyframes splashWord{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:translateY(0);}}
@keyframes splashBar{0%{transform:scaleY(0);opacity:0;}55%{opacity:1;}100%{transform:scaleY(1);opacity:1;}}
@keyframes splashMeter{from{transform:translateX(-100%);}to{transform:translateX(0);}}
/* reduced motion: skip boot anim but keep the mark visible (JS still dismisses) */
@media (prefers-reduced-motion:reduce){
  .splash-word,.splash-tag{opacity:1!important;transform:none!important;}
  .splash-mk i{transform:scaleY(1)!important;opacity:1!important;}
  .splash-meter::after{transform:translateX(0)!important;}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;}}

/* ═══════════════════════════════════════════════════════════
   SPLASH (video boot) — cinematic chrome film, white wordmark
   ═══════════════════════════════════════════════════════════ */
.splash{background:#08080A;}
.splash-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}
.splash-veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg, rgba(8,8,10,.36) 0%, rgba(8,8,10,0) 38%, rgba(8,8,10,.18) 64%, rgba(8,8,10,.74) 100%);}
.splash .splash-mark{position:relative;z-index:3;}
.splash .splash-word{color:#fff;text-shadow:0 2px 34px rgba(0,0,0,.55);}
.splash .splash-mk i{background:#fff;box-shadow:0 0 14px rgba(255,255,255,.5);}
.splash .splash-tag{color:rgba(255,255,255,.76);text-shadow:0 1px 16px rgba(0,0,0,.5);}

/* ═══════════════════════════════════════════════════════════
   AUTH / ONBOARDING — sign-in gate (Cloud Dancer, figure hero)
   ═══════════════════════════════════════════════════════════ */
.auth{position:absolute;inset:0;z-index:160;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;
  background:var(--bg);display:flex;flex-direction:column;
  opacity:0;transform:scale(1.014);transition:opacity .55s ease,transform .6s cubic-bezier(.2,.7,.2,1);}
.auth::-webkit-scrollbar{display:none;}
.auth[hidden]{display:none;}
.auth.in{opacity:1;transform:none;}
.auth.out{opacity:0;pointer-events:none;}
.auth-bg{position:absolute;top:0;left:0;width:100%;height:540px;object-fit:cover;object-position:56% 0%;z-index:1;filter:var(--img-filter);}
.auth-veil{position:absolute;top:0;left:0;right:0;height:540px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg, rgba(233,233,231,.16) 0%, rgba(233,233,231,.02) 28%, rgba(233,233,231,.42) 60%, rgba(233,233,231,.86) 80%, var(--bg) 96%);}
/* WCAG AA scrim — lifts body copy off the hero to ≥4.5:1 behind the text block */
.auth-scrim{position:absolute;left:0;right:0;top:236px;height:236px;z-index:3;pointer-events:none;
  background:linear-gradient(180deg, rgba(247,247,245,0) 0%, rgba(247,247,245,.55) 46%, rgba(247,247,245,.9) 85%, var(--bg) 100%);}
.auth-statusbar{position:relative;z-index:4;height:52px;padding:18px 32px 0;display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:15px;color:var(--ink);}
.auth-statusbar .sb-icons{display:flex;align-items:center;gap:7px;}
.auth-brand{position:relative;z-index:4;height:48px;padding:0 22px;display:flex;align-items:center;}
.auth-brand .wordmark{font-weight:600;font-size:21px;letter-spacing:-.4px;color:var(--ink);display:inline-flex;align-items:flex-end;}
.auth-brand .wordmark .mk{display:inline-flex;align-items:flex-end;gap:3px;padding-bottom:6px;margin-left:3px;}
.auth-brand .wordmark .mk i{width:2.6px;height:16px;border-radius:2px;background:var(--ink);display:block;}
.auth-inner{position:relative;z-index:4;padding:8px 24px 58px;display:flex;flex-direction:column;}
.auth-head{margin-top:188px;}
.auth-kick{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--azure);}
.auth-kick .ln{width:24px;height:1px;background:var(--azure);opacity:.7;}
.auth-title{font-size:39px;font-weight:600;letter-spacing:-1.6px;line-height:1.05;color:var(--ink);text-wrap:pretty;}
.auth-sub{margin-top:16px;font-size:17px;line-height:1.45;color:var(--muted);max-width:330px;text-wrap:pretty;}
/* 32pt below hero text block · 12pt between buttons (8pt grid) */
.auth-providers{margin-top:32px;display:flex;flex-direction:column;gap:12px;}
/* min-height (not fixed) so labels grow at accessibility text sizes without truncation */
.auth-provider{min-height:50px;border-radius:12px;padding:8px 18px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:11px;font-size:17px;font-weight:600;font-family:var(--ui);transition:transform .12s,box-shadow .18s,filter .12s;}
.auth-provider:active{transform:scale(.98);filter:brightness(.96);}
.auth-provider.apple{background:var(--ink);color:#fff;border:1px solid var(--ink);box-shadow:var(--shadow-md);gap:8px;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro',system-ui,sans-serif;font-weight:600;letter-spacing:-.2px;}
.auth-provider.google{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-sm);}
.auth-provider .pic{width:21px;height:21px;flex-shrink:0;}
/* Apple logo at official optical scale against 17pt label */
.auth-provider.apple .pic{width:18px;height:18px;margin-top:-1px;}
/* 24pt above the email label sits in this divider's bottom margin */
.auth-divider{display:flex;align-items:center;gap:14px;margin:24px 0;}
.auth-divider .ln{flex:1;height:1px;background:rgba(22,22,22,.10);}
.auth-divider span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);}
.auth-field{display:flex;flex-direction:column;gap:12px;}
.auth-label{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);}
.auth-input{height:52px;border-radius:14px;padding:0 18px;font-size:17px;font-family:var(--ui);color:var(--ink);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.6);outline:none;transition:border-color .18s,box-shadow .18s;}
.auth-input::placeholder{color:rgba(22,22,22,.42);}
.auth-input:focus{border-color:var(--azure);box-shadow:0 0 0 3px var(--azure-tint);}
.auth-input.invalid{border-color:#C0492F;box-shadow:0 0 0 3px rgba(192,73,47,.14);}
.auth-submit{min-height:50px;padding:8px 18px;border-radius:99px;cursor:pointer;font-size:17px;font-weight:600;font-family:var(--ui);color:#fff;background:var(--ink);border:1px solid var(--ink);
  box-shadow:0 0 0 1px rgba(62,128,176,.55),0 14px 30px -14px rgba(22,22,22,.5);transition:transform .12s,filter .12s;}
.auth-submit:active{transform:scale(.98);filter:brightness(.96);}
/* Apple 5.1.1 — core features work without an account; quiet accent text link, ≥44pt tap target */
.auth-explore{margin-top:24px;align-self:center;min-height:44px;padding:6px 14px;background:none;border:none;cursor:pointer;
  font-family:var(--ui);font-size:15px;font-weight:500;color:var(--azure);display:inline-flex;align-items:center;justify-content:center;
  transition:opacity .18s,transform .12s,filter .12s;}
.auth-explore:hover{opacity:.7;}
.auth-explore:active{transform:scale(.98);filter:brightness(.96);}
.auth-legal{text-align:center;font-size:12px;line-height:1.5;color:rgba(22,22,22,.5);margin-top:14px;}
.auth-legal a{color:rgba(22,22,22,.62);text-decoration:underline;text-underline-offset:2px;font-weight:500;}

/* ════════════════════════════════════════════════════════════
   HOME · primary "Begin tonight's signal" CTA  (entry to Player)
   ════════════════════════════════════════════════════════════ */
.begin-wrap{display:flex;flex-direction:column;gap:9px;}
.begin{width:100%;min-height:58px;padding:10px 20px;border-radius:18px;cursor:pointer;border:1px solid var(--ink);
  background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--ui);font-size:17px;font-weight:600;letter-spacing:-.3px;
  box-shadow:0 0 0 1px rgba(62,128,176,.5),0 18px 38px -18px rgba(22,22,22,.55);
  transition:transform .12s,filter .12s;}
.begin:active{transform:scale(.98);filter:brightness(.92);}
.begin-ico{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.begin-ico svg{margin-left:2px;}
.begin-lbl{display:inline-flex;align-items:baseline;gap:6px;min-width:0;white-space:nowrap;overflow:hidden;}
.begin[data-mode="resume"]{font-size:15px;}
#begin-label{display:inline-flex;align-items:baseline;gap:6px;min-width:0;overflow:hidden;white-space:nowrap;}
.begin-sep{opacity:.45;flex-shrink:0;}
.begin-fname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.begin-hz{color:var(--azure-soft);font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:0;flex-shrink:0;white-space:nowrap;}
.begin-note{font-size:13px;line-height:1.4;opacity:.6;text-align:center;text-wrap:pretty;}

/* ════════════════════════════════════════════════════════════
   PLAYER · guided first listen  (full-screen, light palette)
   Per-frequency variation = hue + motion only. Band sets:
     --pb-accent  ring / fill / glow colour   (hue per band)
     --pb-pale    orb core highlight
     --pb-tempo   orb pulse duration          (slow Delta → fast Gamma)
   ════════════════════════════════════════════════════════════ */
.player{position:absolute;inset:0;z-index:96;display:flex;flex-direction:column;padding:62px 26px 36px;overflow:hidden;
  --pb-accent:#3E80B0;--pb-pale:#CFF6FF;--pb-tempo:9s;--pb-lo:.87;--pb-hi:1.07;--pl-focal:50%;
  background:radial-gradient(74% 54% at 50% 30%, color-mix(in srgb, var(--pb-accent) 14%, transparent), transparent 70%), var(--bg);
  opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .5s,transform .5s,filter .9s ease;}
.player.open{opacity:1;transform:none;pointer-events:auto;}
.player[hidden]{display:none;}
/* Night behaviour — dim to 40% after 30s idle; any tap restores */
.player.dim{filter:brightness(.4);}
.player-min{position:absolute;top:54px;left:16px;width:44px;height:44px;border-radius:50%;border:none;background:transparent;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity .15s,transform .12s;}
.player-min:active{opacity:.5;transform:scale(.94);}
/* save + share — two quiet 44pt icon buttons, mirrored top-right of the minimize chevron */
.player-actions{position:absolute;top:54px;right:14px;z-index:8;display:flex;gap:2px;}
.pl-act{width:44px;height:44px;border-radius:50%;border:none;background:transparent;color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:transform .12s,opacity .15s,color .15s;}
.pl-act:active{opacity:.5;transform:scale(.92);}
.pl-act .ic-on{display:none;}
#pl-save[aria-pressed="true"]{color:var(--pb-accent);}
#pl-save[aria-pressed="true"] .ic-off{display:none;}
#pl-save[aria-pressed="true"] .ic-on{display:block;}
.player.complete-on .player-actions,.player.complete-on .player-min{display:none;}
/* the completion view keeps ONE chevron — same component, same 44pt hit area, same
   action as Done (dismiss + save). Sits above the view's own stacking context. */
.player.complete-on .plc-min{display:flex;z-index:6;}

/* ── photographic plate · the protocol's B&W photograph, full bleed ──
   Same system, different plate: turning a page in the book. Grayscale,
   held under a --bg scrim so every foreground element keeps AA contrast.
   Ken Burns cycle is 64s; the global reduced-motion rule freezes it. */
.pl-photo{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.pl-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pl-focal-x,50%) var(--pl-focal,50%);
  filter:grayscale(1) contrast(1.18) brightness(.84);opacity:.5;transform-origin:var(--pl-focal-x,50%) var(--pl-focal,50%);
  animation:plKen 64s ease-in-out infinite alternate;}
.pl-scrim{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 56%, transparent) 0%,
    color-mix(in srgb, var(--bg) 66%, transparent) 34%,
    color-mix(in srgb, var(--bg) 88%, transparent) 58%,
    color-mix(in srgb, var(--bg) 97%, transparent) 100%),
    radial-gradient(78% 50% at 50% 30%, color-mix(in srgb, var(--pb-accent) 13%, transparent), transparent 72%);}
@keyframes plKen{from{transform:scale(1.04) translate3d(0,0,0);}to{transform:scale(1.13) translate3d(-1.6%,1.2%,0);}}

/* catalog number — the book's plate numbering, centred in the top rail */
.pl-plate{position:absolute;top:54px;left:50%;transform:translateX(-50%);height:44px;z-index:8;display:flex;align-items:center;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:2.4px;color:var(--ink-2);pointer-events:none;}
.player.complete-on .pl-plate{display:none;}

/* stage holds only the orb; captions get a reserved zone below it */
.player-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:1;min-height:0;pointer-events:none;}

/* ── orb · one glass material, two shape languages ──────────────
   binaural = two translucent sources meeting at the centre (interference)
   pure tone = one clean circle with expanding concentric ripples
   Tint comes ONLY from --pb-accent. Motion is a slow metaphor of the
   band — never the frequency itself; no cycle is shorter than 5s. */
.pbreath{position:relative;width:226px;height:226px;display:flex;align-items:center;justify-content:center;}
.pb-ring{position:absolute;border-radius:50%;transition:transform .7s ease,opacity .7s ease;}
.pb-ring.r1{inset:0;border:1px solid color-mix(in srgb, var(--pb-accent) 26%, transparent);}
.pb-ring.r2{inset:34px;border:1px solid color-mix(in srgb, var(--pb-accent) 14%, transparent);}

.pb-core{position:relative;width:138px;height:138px;border-radius:50%;overflow:hidden;
  transition:transform .7s ease,box-shadow .7s ease,width .5s ease,height .5s ease;
  background:
    radial-gradient(112% 92% at 32% 20%, rgba(255,255,255,.94), rgba(255,255,255,.30) 42%, rgba(255,255,255,0) 66%),
    radial-gradient(circle at 50% 64%, color-mix(in srgb, var(--pb-pale) 62%, transparent), color-mix(in srgb, var(--pb-accent) 26%, transparent) 68%, color-mix(in srgb, var(--pb-accent) 10%, transparent) 100%);
  border:1px solid color-mix(in srgb, var(--pb-accent) 34%, transparent);
  box-shadow:inset 0 1px 1.5px rgba(255,255,255,.92),inset 0 -18px 30px -18px color-mix(in srgb, var(--pb-accent) 52%, transparent),
    0 18px 46px -18px color-mix(in srgb, var(--pb-accent) 48%, transparent);
  backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);}
.pb-refract{position:absolute;left:12%;right:8%;bottom:5%;height:52%;border-radius:50%;
  background:radial-gradient(60% 100% at 62% 92%, color-mix(in srgb, var(--pb-pale) 78%, transparent), transparent 72%);
  filter:blur(7px);opacity:.85;}
.pb-rim{position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 0 6px 10px -8px rgba(255,255,255,.9);
  background:linear-gradient(200deg, rgba(255,255,255,.42), rgba(255,255,255,0) 38%);}
.pb-grain{position:absolute;inset:0;border-radius:inherit;opacity:0;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.6) .5px, rgba(255,255,255,0) .6px);background-size:4px 4px;}

/* binaural — two overlapping sources; the third appears where they meet */
.pb-src{position:absolute;top:50%;width:152px;height:152px;border-radius:50%;transform:translateY(-50%);display:none;
  background:radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--pb-pale) 58%, transparent), color-mix(in srgb, var(--pb-accent) 26%, transparent) 64%, color-mix(in srgb, var(--pb-accent) 7%, transparent) 100%);
  border:1px solid color-mix(in srgb, var(--pb-accent) 34%, transparent);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.8),0 14px 38px -20px color-mix(in srgb, var(--pb-accent) 50%, transparent);
  mix-blend-mode:multiply;}
.pb-src.l{left:10px;}
.pb-src.r{right:10px;}
.player[data-signal="binaural"] .pb-src{display:block;}
.player[data-signal="binaural"] .pb-core{width:104px;height:140px;}
.player[data-signal="binaural"] .pb-ring.r2,.player[data-signal="tone"] .pb-ring.r2{display:none;}

/* pure tone — one source, one wave */
.pb-ripple{position:absolute;width:138px;height:138px;border-radius:50%;display:none;opacity:0;
  border:1px solid color-mix(in srgb, var(--pb-accent) 48%, transparent);}
.player[data-signal="tone"] .pb-ripple{display:block;}
.player[data-signal="tone"].playing .pb-ripple{animation:plRipple var(--pb-tempo) cubic-bezier(.25,.6,.3,1) infinite;}
.player[data-signal="tone"].playing .pb-ripple.w2{animation-delay:calc(var(--pb-tempo) / 3);}
.player[data-signal="tone"].playing .pb-ripple.w3{animation-delay:calc(var(--pb-tempo) / 3 * 2);}
@keyframes plRipple{0%{transform:scale(.98);opacity:0;}12%{opacity:.5;}100%{transform:scale(1.62);opacity:0;}}

.player.playing .pb-ring.r1{animation:plbreath var(--pb-tempo) ease-in-out infinite;}
.player.playing .pb-ring.r2{animation:plbreath var(--pb-tempo) ease-in-out infinite reverse;}
.player.playing .pb-core{animation:plcore var(--pb-tempo) ease-in-out infinite;}
.player[data-signal="binaural"].playing .pb-src.l{animation:plSrcL var(--pb-tempo) ease-in-out infinite;}
.player[data-signal="binaural"].playing .pb-src.r{animation:plSrcR var(--pb-tempo) ease-in-out infinite;}
@keyframes plbreath{0%,100%{transform:scale(var(--pb-lo));opacity:.5;}50%{transform:scale(var(--pb-hi));opacity:.95;}}
@keyframes plcore{0%,100%{transform:scale(var(--pb-lo));box-shadow:inset 0 1px 1.5px rgba(255,255,255,.9),inset 0 -18px 30px -18px color-mix(in srgb, var(--pb-accent) 44%, transparent),0 12px 30px -16px color-mix(in srgb, var(--pb-accent) 34%, transparent);}
  50%{transform:scale(var(--pb-hi));box-shadow:inset 0 1px 1.5px rgba(255,255,255,1),inset 0 -20px 34px -18px color-mix(in srgb, var(--pb-accent) 60%, transparent),0 24px 60px -16px color-mix(in srgb, var(--pb-accent) 62%, transparent);}}
@keyframes plSrcL{0%,100%{transform:translate(0,-50%) scale(.985);}50%{transform:translate(11px,-50%) scale(1.015);}}
@keyframes plSrcR{0%,100%{transform:translate(0,-50%) scale(.985);}50%{transform:translate(-11px,-50%) scale(1.015);}}

/* band motion metaphors — amplitude per band; tempo set from BAND_THEMES */
.player[data-band="delta"]{--pb-lo:.80;--pb-hi:1.10;}
.player[data-band="theta"]{--pb-lo:.86;--pb-hi:1.07;}
.player[data-band="alpha"]{--pb-lo:.87;--pb-hi:1.07;}
.player[data-band="beta"]{--pb-lo:.93;--pb-hi:1.02;}
.player[data-band="gamma"]{--pb-lo:.95;--pb-hi:1.03;}
.player[data-band="tone"]{--pb-lo:.92;--pb-hi:1.04;}
.player[data-band="theta"].playing .pbreath{animation:plDrift 17s ease-in-out infinite;}
@keyframes plDrift{0%,100%{transform:translate(0,0);}30%{transform:translate(7px,-6px);}62%{transform:translate(-6px,5px);}}
.player[data-band="gamma"] .pb-grain{opacity:.34;}
.player[data-band="gamma"].playing .pb-grain{animation:plGrain 11s linear infinite;}
@keyframes plGrain{0%{background-position:0 0;opacity:.26;}50%{opacity:.52;}100%{background-position:16px 24px;opacity:.26;}}

/* reserved 60pt caption zone between orb and title — layout never jumps. Decorative: never eats taps. */
.pl-capzone{position:relative;z-index:1;height:60px;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0 8px;pointer-events:none;}
.pl-caption{text-align:center;font-family:var(--serif);font-size:17px;line-height:1.4;font-weight:400;color:var(--ink);
  opacity:0;transition:opacity .85s ease;text-wrap:balance;}
.pl-caption.show{opacity:1;}

/* info block */
.pl-info{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:2px;}
.pl-name{font-size:27px;font-weight:600;letter-spacing:-.6px;}
/* signal-type badge — the same pill as the home category cards, smaller, on light */
.pl-sig{height:24px;padding:0 11px;margin-bottom:3px;border-radius:99px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-2);
  background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid color-mix(in srgb, var(--pb-accent) 28%, transparent);}
.pl-sig .sd{width:5px;height:5px;border-radius:50%;flex-shrink:0;background:var(--pb-accent);box-shadow:0 0 7px color-mix(in srgb, var(--pb-accent) 75%, transparent);}
.pl-freq{font-family:var(--mono);font-size:13px;letter-spacing:.4px;color:var(--muted);}
/* per-frequency purpose tag — serif italic, matching "That's the instrument." */
.pl-intent{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--ink);opacity:.6;margin-top:2px;pointer-events:none;}

/* timer = elapsed / total, total taps to choose session length */
.pl-timer{display:inline-flex;align-items:center;gap:14px;margin-top:8px;
  font-family:var(--mono);font-size:40px;font-weight:300;letter-spacing:-1px;color:var(--ink);font-variant-numeric:tabular-nums;}
.pl-total-wrap{position:relative;display:inline-flex;}
.pl-total{display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:7px 15px;cursor:pointer;border-radius:99px;
  font-family:var(--ui);font-size:15px;font-weight:600;letter-spacing:0;color:var(--pb-accent);
  background:color-mix(in srgb, var(--pb-accent) 11%, transparent);border:1px solid color-mix(in srgb, var(--pb-accent) 35%, transparent);
  transition:transform .12s,background .15s,border-color .15s,color .15s;}
.pl-total:hover{background:color-mix(in srgb, var(--pb-accent) 16%, transparent);}
.pl-total:active{transform:scale(.96);}
.pl-total[aria-expanded="true"]{background:var(--pb-accent);border-color:var(--pb-accent);color:#fff;}
.pl-caret{font-size:11px;line-height:1;opacity:.85;}
.pl-lenmenu{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);z-index:6;
  display:flex;flex-wrap:nowrap;gap:6px;justify-content:center;max-width:calc(100vw - 40px);overflow-x:auto;scrollbar-width:none;
  padding:7px 9px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg);}
.pl-lenmenu::-webkit-scrollbar{display:none;}
.pl-lenmenu[hidden]{display:none;}
.pl-lenmenu button{flex:0 0 auto;min-width:44px;min-height:44px;padding:0 6px;border:1px solid var(--line);background:var(--surface);cursor:pointer;
  font-family:var(--mono);font-size:15px;font-weight:600;color:var(--ink);border-radius:12px;
  display:flex;align-items:center;justify-content:center;transition:transform .12s,background .14s,border-color .14s,color .14s;}
.pl-lenmenu button:hover{background:color-mix(in srgb, var(--pb-accent) 11%, transparent);}
.pl-lenmenu button:active{transform:scale(.94);}
.pl-lenmenu button.on{background:var(--pb-accent);border-color:var(--pb-accent);color:#fff;box-shadow:0 8px 20px -10px color-mix(in srgb, var(--pb-accent) 70%, transparent);}

/* session track + minute-3 shift tick (label anchored under the tick) */
.pl-track{position:relative;width:min(284px,84%);height:3px;border-radius:99px;background:rgba(22,22,22,.1);margin-top:42px;}
.pl-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;background:var(--pb-accent);transition:width 1s linear;}
.pl-tick{position:absolute;top:50%;left:20%;transform:translate(-50%,-50%);}
.player[data-signal="tone"] .pl-tick{display:none;}
.pl-tick-dot{display:block;width:7px;height:7px;border-radius:50%;background:var(--pb-accent);box-shadow:0 0 0 2px var(--bg),0 0 0 3px color-mix(in srgb, var(--pb-accent) 40%, transparent);}
/* live phase narration — one line, replaces the old static tick label */
.pl-shift{margin-top:5px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--mono);font-size:10.5px;letter-spacing:1px;color:var(--muted);}

/* controls — pause centered, ambience left, why beneath */
.pl-controls{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:46px;}
.pl-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;}
.pl-amb{justify-self:start;min-height:44px;padding:9px 15px;border-radius:99px;border:1px solid var(--line);background:var(--surface);cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;font-family:var(--ui);font-size:13px;font-weight:600;color:var(--muted);box-shadow:var(--shadow-sm);transition:transform .12s,color .15s,border-color .15s;}
.pl-amb.on{color:var(--pb-accent);border-color:color-mix(in srgb, var(--pb-accent) 40%, transparent);}
.pl-amb .dot{width:7px;height:7px;border-radius:50%;background:var(--faint);transition:.15s;}
.pl-amb.on .dot{background:var(--pb-accent);box-shadow:0 0 8px color-mix(in srgb, var(--pb-accent) 70%, transparent);}
.pl-amb:active{transform:scale(.97);}
.pl-play{justify-self:center;width:64px;height:64px;border-radius:50%;border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px color-mix(in srgb, var(--pb-accent) 50%, transparent),0 16px 34px -14px rgba(22,22,22,.6);transition:transform .12s,filter .12s;}
.pl-play:active{transform:scale(.95);filter:brightness(.93);}
.pl-why{background:none;border:none;cursor:pointer;font-family:var(--ui);font-size:14px;color:var(--pb-accent);min-height:44px;padding:6px 12px;transition:opacity .15s;}
.pl-why:active{opacity:.5;}

/* ── orb at rest (end-of-session) — pulse slows then settles static ── */
.pbreath.rest .pb-ring,.pbreath.rest .pb-core{animation:none!important;transform:scale(1);}
.pbreath.rest .pb-core{transform:scale(.96);}
.pbreath.rest .pb-src{animation:none!important;}
.pbreath.rest .pb-ripple{opacity:0;}
.plc-check{position:absolute;color:var(--pb-accent);display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 2px 6px color-mix(in srgb, var(--pb-accent) 45%, transparent));}

/* ── completion view — same layout language, quiet ── */
.pl-complete{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;padding:62px 26px 38px;
  background:radial-gradient(74% 54% at 50% 30%, color-mix(in srgb, var(--pb-accent) 14%, transparent), transparent 70%), var(--bg);
  opacity:0;transition:opacity .8s ease;}
/* CRITICAL: the hidden attr must win over display:flex, or the empty completion view
   blankets the player at opacity:0 and swallows every control tap. */
.pl-complete[hidden]{display:none !important;}
.pl-complete:not([hidden]){opacity:1;}
.plc-stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;}
.plc-info{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:6px;}
.plc-title{font-size:27px;font-weight:600;letter-spacing:-.6px;}
.plc-sub{font-family:var(--mono);font-size:13px;letter-spacing:.4px;color:var(--muted);}
.plc-checkin{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:42px;}
.plc-q{font-family:var(--serif);font-size:17px;color:var(--ink);}
.plc-pills{display:flex;gap:10px;}
.plc-pill{min-height:44px;padding:9px 20px;border-radius:99px;cursor:pointer;border:1px solid var(--line);background:var(--surface);
  font-family:var(--ui);font-size:15px;font-weight:500;color:var(--ink);box-shadow:var(--shadow-sm);transition:transform .12s,border-color .2s ease,color .2s ease,background .2s ease;}
.plc-pill:active{transform:scale(.96);}
.plc-pill.pulse{animation:plcPulse .34s ease;}
@keyframes plcPulse{0%{transform:scale(1);}40%{transform:scale(1.09);}100%{transform:scale(1);}}
@media (prefers-reduced-motion: reduce){ .plc-pill.pulse{animation:none;} }
/* selected = inverted, not coloured — the band accent stays reserved for the orb */
.plc-pill.on{background:var(--ink);border-color:var(--ink);color:var(--bg);box-shadow:0 10px 24px -12px rgba(22,22,22,.55);}
.plc-foot{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:46px;}
.plc-foot-top{display:flex;flex-direction:column;align-items:center;gap:7px;}
.plc-next{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--muted);opacity:.85;}
/* up-next line — quiet, mono, non-interactive; hidden when no successor exists */
.plc-upnext{font-family:var(--mono);font-size:11px;letter-spacing:.9px;color:var(--faint);pointer-events:none;}
.plc-upnext[hidden]{display:none;}
.plc-streak{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);}
.plc-dot{width:9px;height:9px;border-radius:50%;background:var(--pb-accent);box-shadow:0 0 10px color-mix(in srgb, var(--pb-accent) 80%, transparent);}
.plc-done{min-height:52px;width:100%;max-width:300px;padding:8px 18px;border-radius:99px;cursor:pointer;border:1px solid var(--ink);background:var(--ink);color:#fff;
  font-family:var(--ui);font-size:17px;font-weight:600;box-shadow:0 14px 30px -14px rgba(22,22,22,.5);transition:transform .12s,filter .12s;}
.plc-done:active{transform:scale(.98);filter:brightness(.93);}

/* iOS HIG · honour Reduce Motion → static ring, gentle opacity pulse only */
@media (prefers-reduced-motion: reduce){
  .player.playing .pb-ring.r1,.player.playing .pb-ring.r2,.player.playing .pb-core{animation:plpulse 4.5s ease-in-out infinite;transform:none;}
  @keyframes plpulse{0%,100%{opacity:.6;}50%{opacity:1;}}
  .player{transition:opacity .3s;transform:none;}
}

/* ── Mini-player: persists above the tab bar while the player is minimized ── */
.miniplayer{position:absolute;left:14px;right:14px;bottom:100px;z-index:72;height:60px;
  --pb-accent:#3E80B0;--pb-pale:#CFF6FF;
  display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;border-radius:20px;
  background:rgba(255,255,255,.8);backdrop-filter:blur(28px) saturate(1.7);-webkit-backdrop-filter:blur(28px) saturate(1.7);
  border:1px solid var(--glass-hair);box-shadow:0 18px 40px -16px rgba(22,22,22,.34),inset 0 1px 0 rgba(255,255,255,.9);
  opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s;}
.miniplayer.show{opacity:1;transform:none;}
.miniplayer[hidden]{display:none;}
.mini-main{flex:1;min-width:0;display:flex;align-items:center;gap:11px;background:none;border:none;cursor:pointer;text-align:left;padding:6px;border-radius:14px;}
.mini-orb{width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle at 50% 38%, var(--pb-pale), color-mix(in srgb, var(--pb-accent) 32%, transparent) 70%);
  border:1px solid color-mix(in srgb, var(--pb-accent) 45%, transparent);
  box-shadow:0 0 14px -2px color-mix(in srgb, var(--pb-accent) 60%, transparent);}
.miniplayer.playing .mini-orb{animation:miniPulse 2.6s ease-in-out infinite;}
@keyframes miniPulse{0%,100%{transform:scale(.92);opacity:.85;}50%{transform:scale(1.04);opacity:1;}}
.mini-txt{display:flex;flex-direction:column;min-width:0;gap:1px;}
.mini-txt b{font-size:14.5px;font-weight:600;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mini-txt span{font-family:var(--mono);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;}
.mini-play{width:44px;height:44px;border-radius:50%;flex-shrink:0;border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .12s,filter .12s;}
.mini-play:active{transform:scale(.94);filter:brightness(.93);}
@media (prefers-reduced-motion: reduce){ .miniplayer.playing .mini-orb{animation:none;} }