/* =========================================================
   HEALING CIRCLE — production web app
   Visual system ported from prototype.html (the feel-spec).
   Layout: real desktop app. The screen IS the ritual;
   everything else lives in the shelf. No phone frame.
   ========================================================= */
:root{
  --ink:#07090b; --ink-2:#0d1114; --cream:#f4ecdc; --cream-dim:#c9bda7; --gold:#c9a24a;
  --line:rgba(244,236,220,0.12);
  --chakra:#F5B400; --chakra-deep:#6f4a00; --chakra-glow:rgba(245,180,0,0.55); --chakra-haze:rgba(245,180,0,0.18);
  --display:'Fraunces',ui-serif,Georgia,serif; --body:'Manrope',ui-sans-serif,system-ui,sans-serif;
  --breath:6.5s;
  --shelf-w:min(460px,100vw);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--ink);color:var(--cream);font-family:var(--body);height:100%;overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:
  radial-gradient(ellipse 70% 50% at 50% 0%,rgba(255,255,255,0.035),transparent 60%),
  radial-gradient(ellipse 90% 70% at 50% 100%,var(--chakra-haze),transparent 70%),
  linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 45%,#050607 100%);
  transition:background 1200ms ease}
/* film grain over the whole app — was the phone's job, now the room's */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9;opacity:0.4;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* Scene layer — a chosen video behind the whole room. Veiled so the portal
   and the type always win; the aura (GL field) keeps drawing over it. */
.video-bg{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:0;
  opacity:0;transition:opacity 1100ms ease;background:#000}
.video-bg.is-on{opacity:1}
/* The veil sits between scene and aura; its strength is the user's, per scene.
   Multiply-blended: black darkens, the chakra tone turns it into a colour filter. */
.video-veil{position:fixed;inset:0;pointer-events:none;z-index:0;background:#000;mix-blend-mode:multiply;
  opacity:0;transition:opacity 600ms ease,background 1200ms ease}
.video-veil.chakra{background:var(--chakra)}

.eyebrow{text-transform:uppercase;letter-spacing:0.32em;font-size:10px;color:var(--cream-dim);font-weight:500}
.hint{text-transform:none;letter-spacing:0.02em;color:rgba(244,236,220,0.4);font-size:10px}

/* ============ ONBOARDING — the arrival ============
   Desktop-first: the living vessel holds the left of the room,
   the walkthrough speaks on the right. One portal, alive throughout. */
.onboard{position:fixed;inset:0;z-index:20}
.onboard[hidden]{display:none}
.ob-brand{position:absolute;top:24px;left:32px;z-index:2}
.ob-stage{display:grid;grid-template-columns:1.08fr 1fr;height:100%}
.ob-visual{position:relative;display:grid;place-items:center;overflow:hidden}
.ob-portal-main{width:min(54vh,500px)}
.ob-caption{position:absolute;bottom:7vh;left:24px;right:24px;text-align:center;font-family:var(--display);font-style:italic;font-weight:300;font-size:15px;color:var(--cream-dim);opacity:0.8}
.ob-flow{position:relative;min-width:0}
.onboard .screen{position:absolute;inset:0;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity 700ms ease,transform 900ms cubic-bezier(.2,.8,.2,1);overflow-y:auto;scrollbar-width:none}
.onboard .screen::-webkit-scrollbar{width:0}
.onboard .screen.is-active{opacity:1;pointer-events:auto;transform:none}
.ob-inner{min-height:100%;max-width:540px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:96px 48px 96px 8px}
.ob-back{width:34px;height:34px;flex:none;border-radius:999px;border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;color:var(--cream);background:transparent;transition:all 200ms ease;margin-bottom:28px}
.ob-back:hover{border-color:rgba(244,236,220,0.4)}
.onboard .h-display{font-size:clamp(30px,3vw,44px);line-height:1.14;margin:14px 0 14px}
.onboard .h-display.xl{font-size:clamp(36px,3.6vw,54px);line-height:1.08}
.onboard .lede{font-size:15px;max-width:44ch}
.onboard .btn-row{margin-top:22px;padding-top:0;width:min(420px,100%)}
.onboard .field{width:min(420px,100%)}
.onboard .auth-google{width:min(380px,100%)}
.onboard .auth-divider{width:min(380px,100%)}
.ob-note{display:block;margin-top:20px;font-size:10px;letter-spacing:0.28em;text-transform:uppercase;color:rgba(244,236,220,0.35)}
/* the progress rail — editorial marks, not dots */
.ob-rail{display:flex;gap:30px;margin-top:64px}
.ob-rail .seg{position:relative;width:38px;height:2px;border-radius:2px;background:rgba(244,236,220,0.14);transition:background 400ms ease}
.ob-rail .seg::after{content:attr(data-l);position:absolute;top:9px;left:0;font-size:8px;letter-spacing:0.22em;text-transform:uppercase;color:var(--cream-dim);opacity:0.45;white-space:nowrap;transition:opacity 400ms ease,color 400ms ease}
.ob-rail .seg.on{background:var(--chakra);box-shadow:0 0 12px var(--chakra-glow)}
.ob-rail .seg.on::after{opacity:0.95;color:var(--cream)}
.ob-rail .seg.done{background:rgba(244,236,220,0.4)}
@media (max-width:900px){
  .ob-stage{grid-template-columns:1fr;grid-template-rows:36vh 1fr}
  .ob-portal-main{width:min(44vw,230px)}
  .ob-caption{display:none}
  .ob-inner{padding:8px 24px 56px;max-width:none}
  .onboard .h-display.xl{font-size:clamp(28px,7vw,38px)}
  .ob-brand{left:20px;top:18px}
  .ob-rail{margin-top:40px;gap:22px}
}

/* ============ THE ROOM ============ */
.app{position:fixed;inset:0;display:grid;grid-template-rows:auto 1fr auto;z-index:1}
.app[hidden]{display:none}

/* 3-column grid so the day/Hz/Huna meta sits in the TRUE centre — space-between
   pushed it left because the right icon cluster outweighs the wordmark. */
.stage-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:22px 32px;position:relative;z-index:4}
.stage-top .wordmark{justify-self:start}
.stage-top .top-meta{justify-self:center}
.wordmark{font-family:var(--display);font-weight:400;font-style:italic;letter-spacing:0.02em;color:var(--cream);font-size:17px;white-space:nowrap}
.wordmark .dot{display:inline-block;width:6px;height:6px;border-radius:999px;background:var(--chakra);box-shadow:0 0 18px var(--chakra-glow);margin:0 8px 2px 0;vertical-align:middle;transition:background 600ms ease,box-shadow 600ms ease}
.wordmark .wm-logo{display:inline-block;width:28px;height:28px;object-fit:contain;margin:0 9px 2px 0;vertical-align:middle;filter:drop-shadow(0 0 7px var(--chakra-glow));transition:filter 600ms ease}
.top-meta{display:flex;align-items:center;gap:14px;color:var(--cream-dim)}
.top-meta .tm{font-size:10px;letter-spacing:0.32em;text-transform:uppercase;white-space:nowrap}
.top-meta .tm-dot{width:3px;height:3px;border-radius:999px;background:var(--chakra);box-shadow:0 0 8px var(--chakra-glow);transition:background 600ms ease}

.icon-btn{appearance:none;cursor:pointer;width:38px;height:38px;flex:none;border-radius:999px;background:rgba(10,12,15,0.42);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);border:1px solid var(--line);color:var(--cream);display:grid;place-items:center;box-shadow:0 2px 12px -4px rgba(0,0,0,0.55);transition:all 220ms ease}
.icon-btn:hover{border-color:rgba(244,236,220,0.38);box-shadow:0 10px 30px -12px var(--chakra-glow)}
.icon-btn svg{width:17px;height:17px}
.stage-top .right{display:flex;align-items:center;gap:10px;justify-self:end}
.shelf-btn{appearance:none;cursor:pointer;display:flex;align-items:center;gap:12px;background:rgba(244,236,220,0.04);border:1px solid var(--line);color:var(--cream);border-radius:999px;padding:10px 18px 10px 14px;font-family:var(--body);font-size:10px;letter-spacing:0.28em;text-transform:uppercase;transition:all 220ms ease}
.shelf-btn:hover{border-color:rgba(244,236,220,0.38);box-shadow:0 10px 30px -12px var(--chakra-glow)}
.shelf-btn .bars{display:flex;flex-direction:column;gap:3px;width:16px}
.shelf-btn .bars i{height:1.5px;background:var(--cream);border-radius:2px;transition:all 220ms ease}
.shelf-btn .bars i:nth-child(2){width:70%} .shelf-btn .bars i:nth-child(3){width:40%}
.shelf-btn:hover .bars i{width:100%}

/* ---- the ritual: portal holds the centre ---- */
.ritual{display:grid;align-content:center;align-items:center;gap:0 48px;padding:0 44px;position:relative;
  grid-template-columns:minmax(240px,1fr) auto minmax(240px,1fr);
  grid-template-areas:"left portal do"}
/* Wings — the side shelves. Each tucks away behind its edge handle,
   so in full screen the portal can hold the room alone. */
.wing{position:relative;z-index:2;transition:transform 640ms cubic-bezier(.2,.8,.2,1),opacity 460ms ease}
.wing.left{grid-area:left;display:flex;flex-direction:column;justify-content:center;gap:34px}
.wing.right{grid-area:do}
.wing.is-closed{opacity:0;pointer-events:none}
.wing.left.is-closed{transform:translateX(calc(-100% - 72px))}
.wing.right.is-closed{transform:translateX(calc(100% + 72px))}
.today-head{display:flex;flex-direction:column;gap:4px}
.portal-wrap{grid-area:portal;display:grid;place-items:center}
.do{display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2}

/* Drawer handles — slim tabs flush to each screen edge, chevron flips with state */
.wing-handle{appearance:none;cursor:pointer;position:fixed;top:50%;z-index:5;width:22px;height:68px;padding:0;
  display:grid;place-items:center;color:var(--cream-dim);background:rgba(244,236,220,0.03);
  border:1px solid var(--line);transition:width 260ms ease,color 260ms ease,border-color 260ms ease,background 260ms ease,box-shadow 260ms ease}
.wing-handle.left{left:0;border-left:none;border-radius:0 12px 12px 0;transform:translateY(-50%)}
.wing-handle.right{right:0;border-right:none;border-radius:12px 0 0 12px;transform:translateY(-50%)}
.wing-handle svg{width:14px;height:14px;transition:transform 520ms cubic-bezier(.2,.8,.2,1)}
.wing-handle:hover{color:var(--cream);border-color:rgba(244,236,220,0.34);background:rgba(244,236,220,0.06);box-shadow:0 0 26px -6px var(--chakra-glow);width:26px}
.wing-handle.is-closed svg{transform:rotate(180deg)}

.today-head .greeting{font-family:var(--display);font-style:italic;font-weight:300;font-size:16px;color:var(--cream-dim)}
.today-head .focus-label{font-family:var(--display);font-weight:300;font-size:clamp(26px,2.6vw,38px);color:var(--cream);line-height:1.15}
.today-head .focus-label em{font-style:italic;color:var(--chakra);transition:color 600ms ease}

/* ---- Portal — brand-defining. GL waves behind, artwork disc holds still. ---- */
.portal{position:relative;width:min(58vh,560px);aspect-ratio:1/1;display:grid;place-items:center}
.portal .ring{position:absolute;inset:0;border-radius:999px;border:1px solid rgba(244,236,220,0.06);z-index:2}
.portal .ring.r1{animation:drift 60s linear infinite}
.portal .ring.r2{inset:6%;border-color:rgba(244,236,220,0.04);animation:drift 90s linear infinite reverse}
.portal .ring.r3{inset:13%;border-color:rgba(244,236,220,0.03)}
/* CSS halo — the fallback. The shader replaces it when WebGL is live. */
.portal .halo{position:absolute;inset:18%;border-radius:999px;background:radial-gradient(circle at 50% 45%,var(--chakra) 0%,var(--chakra) 18%,var(--chakra-deep) 55%,transparent 78%);box-shadow:0 0 60px 10px var(--chakra-glow),0 0 160px 40px var(--chakra-haze),inset 0 0 40px rgba(255,255,255,0.18);animation:breathe var(--breath) ease-in-out infinite;filter:blur(0.6px);transition:background 1200ms ease,box-shadow 1200ms ease;z-index:1}
/* When the aura is live it takes over the anchored portals: CSS halo hides,
   portal.js drives the disc's breath. Feed-card portals keep their CSS life. */
html.gl-live #homePortal .halo,html.gl-live #obPortal .halo{display:none}
html.gl-live #homePortal .inner-circle,html.gl-live #obPortal .inner-circle{animation:none}
/* The whole room is the canvas: waves, stars and motes travel to the screen edge. */
.portal-gl{position:fixed;inset:0;pointer-events:none;z-index:0}
.portal-gl canvas{width:100%;height:100%;display:block}
.inner-circle{position:absolute;inset:27.5%;border-radius:999px;overflow:hidden;box-shadow:0 0 0 2px rgba(244,236,220,0.85),0 0 0 5px rgba(7,9,11,0.7),0 0 0 6px rgba(244,236,220,0.18),0 24px 60px -10px rgba(0,0,0,0.7);background:radial-gradient(circle at 50% 50%,#1a1f23,#07090b);z-index:3;animation:heldBreath calc(var(--breath) * 1.5) ease-in-out infinite}
.inner-image{position:absolute;inset:0;background-position:center;background-size:cover;border-radius:999px;transition:opacity 600ms ease}
/* Magical shimmer over the artwork: a slow sheen wheeling around the disc,
   and every little while a single glint passes across — jewelled, not busy. */
.inner-circle::before{content:'';position:absolute;inset:-18%;border-radius:999px;pointer-events:none;z-index:2;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,250,238,0.13) 55deg,rgba(255,255,255,0.02) 85deg,transparent 130deg,transparent 215deg,rgba(255,250,238,0.07) 245deg,transparent 285deg);
  mix-blend-mode:screen;filter:blur(7px);animation:sheen 16s linear infinite}
.inner-circle::after{content:'';position:absolute;inset:0;border-radius:999px;pointer-events:none;z-index:2;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,0.22) 50%,transparent 60%);
  transform:translateX(-130%);mix-blend-mode:screen;animation:glint 11s ease-in-out infinite}
@keyframes sheen{to{transform:rotate(360deg)}}
@keyframes glint{0%,74%{transform:translateX(-130%)}86%,100%{transform:translateX(130%)}}
/* Arrival ceremony — a held prayer blooms in with one bright glint */
@keyframes arrive{0%{transform:scale(0.9)}62%{transform:scale(1.015)}100%{transform:scale(1)}}
@keyframes glintOnce{0%{transform:translateX(-130%)}60%,100%{transform:translateX(130%)}}
.inner-circle.is-arriving{animation:arrive 1150ms cubic-bezier(.2,.8,.2,1)}
.inner-circle.is-arriving::after{animation:glintOnce 950ms ease-out}
/* gl-live silences the idle CSS breath on anchored portals; the arrival still plays */
html.gl-live #homePortal .inner-circle.is-arriving{animation:arrive 1150ms cubic-bezier(.2,.8,.2,1)}
/* Empty vessel — translucent glass; when the aura is live its light fills it from behind */
.inner-circle.empty{background:
  radial-gradient(circle at 50% 44%,rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.45) 26%,rgba(255,250,238,0.16) 52%,rgba(244,236,220,0) 74%),
  radial-gradient(circle at 50% 50%,rgba(30,36,42,0.30),rgba(10,13,16,0.45) 85%);
  box-shadow:0 0 0 2px rgba(244,236,220,0.85),0 0 0 5px rgba(7,9,11,0.7),0 0 0 6px rgba(244,236,220,0.18),0 24px 60px -10px rgba(0,0,0,0.7),inset 0 0 60px rgba(255,255,255,0.14)}
.inner-circle.empty .inner-image{display:none}
.inner-label{position:absolute;left:0;right:0;bottom:-56px;text-align:center;pointer-events:none;z-index:3}
.inner-label .type{font-size:9px;letter-spacing:0.32em;text-transform:uppercase;color:var(--chakra);transition:color 600ms ease;text-shadow:0 1px 3px rgba(7,9,11,0.6),0 2px 16px rgba(7,9,11,0.7)}
.inner-label .name{font-family:var(--display);font-style:italic;font-weight:300;font-size:19px;color:var(--cream);margin-top:4px;text-shadow:0 1px 3px rgba(7,9,11,0.6),0 2px 18px rgba(7,9,11,0.75)}
.ob-portal{width:min(70%,300px);margin:auto 0}
.ob-portal.small{width:min(52%,220px);margin:0 auto 28px}
@keyframes breathe{0%,100%{transform:scale(1.00);opacity:0.92}50%{transform:scale(1.06);opacity:1}}
@keyframes heldBreath{0%,100%{transform:scale(1.00)}50%{transform:scale(1.012)}}
@keyframes drift{to{transform:rotate(360deg)}}

/* ---- today's intentions ---- */
.intentions{display:flex;flex-direction:column;gap:6px;max-height:34vh;overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.intentions::-webkit-scrollbar{width:3px} .intentions::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
.intent-chip{appearance:none;background:transparent;border:1px solid var(--line);color:var(--cream-dim);padding:8px 12px 8px 8px;border-radius:999px;font-size:11px;letter-spacing:0.04em;cursor:pointer;transition:all 200ms ease;display:flex;align-items:center;gap:9px;text-align:left;width:100%}
.intent-chip .swatch{width:20px;height:20px;border-radius:999px;background-position:center;background-size:cover;box-shadow:0 0 0 1px rgba(244,236,220,0.5);flex:none}
.intent-chip .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.intent-chip .mine-tag{margin-left:auto;font-size:8px;letter-spacing:0.24em;text-transform:uppercase;color:var(--chakra);flex:none}
.intent-chip:hover{color:var(--cream);border-color:rgba(244,236,220,0.28)}
.intent-chip.on{color:var(--ink);background:var(--cream);border-color:var(--cream)}
.intent-chip.on .mine-tag{color:var(--ink);opacity:0.5}

.add-inline{appearance:none;margin-top:12px;background:transparent;border:1px dashed var(--line);color:var(--cream-dim);border-radius:14px;padding:12px;font-family:var(--body);font-size:10px;letter-spacing:0.24em;text-transform:uppercase;cursor:pointer;transition:all 200ms ease}
.add-inline:hover{border-color:var(--chakra);color:var(--cream)}

/* ---- typography + fields ---- */
.h-display{font-family:var(--display);font-weight:300;font-size:clamp(26px,3vw,34px);line-height:1.2;letter-spacing:-0.01em;color:var(--cream);margin:0 0 10px}
.h-display em{font-style:italic;color:var(--chakra);transition:color 600ms ease}
.lede{font-size:14px;color:var(--cream-dim);line-height:1.55;font-weight:300;margin:0 0 24px;max-width:38ch}
.field{border:none;border-bottom:1px solid var(--line);background:transparent;padding:14px 0;font-family:var(--display);font-weight:300;font-size:22px;color:var(--cream);width:100%;outline:none;transition:border-color 200ms ease}
.field:focus{border-bottom-color:var(--chakra)} .field::placeholder{color:rgba(244,236,220,0.3);font-style:italic}
.field-label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:0.32em;color:var(--cream-dim);margin:18px 0 8px}
.chip{appearance:none;background:transparent;border:1px solid var(--line);color:var(--cream);font-family:var(--body);padding:10px 14px;border-radius:999px;font-size:12px;letter-spacing:0.04em;cursor:pointer;transition:all 200ms ease}
.chip:hover{border-color:rgba(244,236,220,0.28)} .chip.on{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.cat-picker{display:flex;flex-wrap:wrap;gap:8px}
.cat-picker .chip.on{box-shadow:0 8px 22px -10px var(--chakra-glow)}
.btn-row{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:24px}
.btn{appearance:none;cursor:pointer;font-family:var(--body);font-weight:500;letter-spacing:0.18em;text-transform:uppercase;font-size:11px;padding:14px 22px;border-radius:999px;border:1px solid var(--cream);color:var(--ink);background:var(--cream);transition:all 200ms ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 30px -10px var(--chakra-glow)}
.btn.ghost{background:transparent;color:var(--cream);border-color:var(--line)} .btn.ghost:hover{border-color:rgba(244,236,220,0.4);box-shadow:none}
.btn.full{width:100%} .btn.lg{padding:18px 28px;font-size:12px} .btn[disabled]{opacity:0.35;pointer-events:none;box-shadow:none}
.auth-google{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px;border-radius:999px;border:1px solid var(--line);background:rgba(244,236,220,0.04);color:var(--cream);font-size:13px;letter-spacing:0.06em;cursor:pointer;transition:all 200ms ease}
.auth-google:hover{border-color:rgba(244,236,220,0.3)}
.auth-divider{text-align:center;color:var(--cream-dim);font-size:10px;text-transform:uppercase;letter-spacing:0.32em;margin:18px 0}
.focus-count{font-size:10px;letter-spacing:0.32em;text-transform:uppercase;color:var(--cream-dim);margin-top:16px;text-align:center} .focus-count em{color:var(--chakra);font-style:normal;transition:color 600ms ease}

/* ---- the ritual card ---- */
.ritual-card{border-radius:26px;padding:22px;background:radial-gradient(ellipse 90% 70% at 50% 0%,var(--chakra-haze),transparent 70%),linear-gradient(180deg,rgba(244,236,220,0.04),rgba(244,236,220,0.015));border:1px solid var(--line);display:flex;flex-direction:column;gap:12px;overflow:hidden}
.ritual-card .day{font-family:var(--display);font-style:italic;font-weight:300;font-size:14px;color:var(--cream-dim);letter-spacing:0.04em}
.ritual-card .row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0}
.ritual-card .stat .key{font-size:9px;letter-spacing:0.32em;text-transform:uppercase;color:var(--cream-dim)}
.ritual-card .stat .val{font-family:var(--display);font-weight:300;font-size:22px;color:var(--cream);line-height:1;margin-top:4px}
.ritual-card .stat.r{text-align:right} .ritual-card .stat .val em{font-style:italic;color:var(--chakra);transition:color 600ms ease}
.ritual-card .divider-dot{width:6px;height:6px;border-radius:999px;background:var(--chakra);box-shadow:0 0 12px var(--chakra-glow);transition:background 600ms ease,box-shadow 600ms ease}
.affirmation{font-family:var(--display);font-style:italic;font-weight:300;font-size:19px;line-height:1.4;color:var(--cream);margin:0;max-width:30ch}
.affirmation .quote{color:var(--chakra);font-style:normal;transition:color 600ms ease}
.huna{font-size:11px;letter-spacing:0.32em;text-transform:uppercase;color:var(--cream-dim)} .huna span{color:var(--chakra);transition:color 600ms ease}

.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.action{appearance:none;background:rgba(244,236,220,0.04);border:1px solid rgba(201,162,74,0.6);color:var(--cream);padding:12px 6px 10px;border-radius:18px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:9px;letter-spacing:0.16em;text-transform:uppercase;cursor:pointer;transition:all 200ms ease}
.action:hover{border-color:rgba(244,236,220,0.3)}
/* Active actions: white type on a slightly deepened chakra — readable on every day's colour */
.action.is-active{background:linear-gradient(rgba(7,9,11,0.22),rgba(7,9,11,0.22)) var(--chakra);color:#fff;border-color:var(--chakra);text-shadow:0 1px 3px rgba(7,9,11,0.5)}
.action svg{width:20px;height:20px}

.stage-bot{padding:16px 32px 22px;display:grid;place-items:center;position:relative;z-index:2}
.pulse{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--cream-dim);padding:12px 18px;border:1px solid var(--line);border-radius:16px;background:rgba(244,236,220,0.02)}
.pulse .heart{width:8px;height:8px;border-radius:999px;background:var(--chakra);box-shadow:0 0 12px var(--chakra-glow);animation:pulseDot 1.6s ease-in-out infinite;transition:background 600ms ease;flex:none}
.pulse strong{color:var(--cream);font-weight:500}
@keyframes pulseDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:0.6}}

/* ============ THE SHELF ============ */
.scrim{position:fixed;inset:0;z-index:10;background:rgba(5,6,7,0.6);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity 400ms ease}
.scrim.is-on{opacity:1;pointer-events:auto}
.shelf{position:fixed;top:0;right:0;bottom:0;width:var(--shelf-w);z-index:11;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(13,17,20,0.96),rgba(7,9,11,0.98));backdrop-filter:blur(20px);
  border-left:1px solid var(--line);box-shadow:-40px 0 100px -30px rgba(0,0,0,0.9);
  transform:translateX(100%);transition:transform 520ms cubic-bezier(.2,.8,.2,1)}
.shelf.is-on{transform:none}
.shelf-head{display:flex;align-items:flex-start;gap:10px;padding:18px 18px 0;flex:none}
/* Tabs wrap instead of clipping — every panel stays reachable at any width */
.shelf-tabs{display:flex;flex-wrap:wrap;gap:4px;flex:1}
.stab{appearance:none;background:transparent;border:1px solid transparent;color:var(--cream-dim);font-family:var(--body);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;padding:9px 11px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:all 200ms ease}
.stab:hover{color:var(--cream)} .stab.is-on{color:var(--ink);background:var(--cream);border-color:var(--cream)}
.shelf-close{appearance:none;flex:none;width:32px;height:32px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--cream);font-size:18px;line-height:1;cursor:pointer;transition:all 200ms ease}
.shelf-close:hover{border-color:rgba(244,236,220,0.4)}
.shelf-body{flex:1;position:relative;overflow:hidden}
.panel{position:absolute;inset:0;padding:8px 24px 24px;overflow-y:auto;display:none;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.panel::-webkit-scrollbar{width:4px} .panel::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
.panel.is-on{display:flex;animation:panelIn 420ms cubic-bezier(.2,.8,.2,1)}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 0 6px;position:sticky;top:0;background:linear-gradient(180deg,rgba(10,13,16,0.98) 60%,transparent);z-index:2}
.panel-head h2{font-family:var(--display);font-style:italic;font-weight:300;font-size:22px;margin:0;color:var(--cream)}

/* Feed inside the shelf — the column shape it was always designed for */
.feed{flex:1;margin:0 -24px;padding:0 24px;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none}
.feed::-webkit-scrollbar{width:0}
.feed-card{height:100%;min-height:520px;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;position:relative}
.feed-card .fc-eyebrow{font-size:9px;letter-spacing:0.32em;text-transform:uppercase;color:var(--cream-dim)} .feed-card .fc-eyebrow span{color:var(--chakra)}
.feed-card .portal{width:min(56%,200px);margin:10px auto 12px}
.feed-card .portal .inner-label{display:none}
.feed-card .fc-title{font-family:var(--display);font-weight:300;font-size:26px;color:var(--cream);margin:0}
.feed-card .fc-line{font-family:var(--display);font-style:italic;font-weight:300;font-size:14px;color:var(--cream-dim);margin:0;max-width:30ch;line-height:1.5}
.fc-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;justify-content:center}
.fc-btn{appearance:none;cursor:pointer;border:1px solid var(--line);background:rgba(244,236,220,0.04);color:var(--cream);border-radius:999px;padding:10px 16px;font-family:var(--body);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;transition:all 200ms ease}
.fc-btn:hover{border-color:rgba(244,236,220,0.35)}
.fc-btn.is-active{background:linear-gradient(rgba(7,9,11,0.22),rgba(7,9,11,0.22)) var(--chakra);border-color:var(--chakra);color:#fff;text-shadow:0 1px 3px rgba(7,9,11,0.5)}
.feed-hint{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:0.32em;text-transform:uppercase;color:rgba(244,236,220,0.35);animation:pulseDot 3s ease-in-out infinite}
@keyframes witnessRipple{from{transform:scale(0.7);opacity:0.9}to{transform:scale(1.45);opacity:0}}
.portal .w-ripple{position:absolute;inset:16%;border-radius:999px;pointer-events:none;border:1px solid var(--cream);box-shadow:0 0 30px var(--chakra-glow);animation:witnessRipple 900ms ease-out forwards;z-index:4}

/* Altar */
.altar-grid{align-content:start;display:grid;grid-template-columns:repeat(3,1fr);gap:20px 12px;margin-top:10px;padding-bottom:12px}
.altar-item{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.altar-item .circle{width:76px;height:76px;border-radius:999px;position:relative;overflow:hidden;box-shadow:0 0 0 1.5px rgba(244,236,220,0.75),0 0 0 4px rgba(7,9,11,0.7),0 0 22px var(--chakra-haze);cursor:pointer;transition:transform 200ms ease}
.altar-item .circle:hover{transform:scale(1.05)} .altar-item .circle .inner-image{position:absolute;inset:0}
.altar-item .a-name{font-family:var(--display);font-style:italic;font-weight:300;font-size:12px;color:var(--cream);line-height:1.3}
.altar-item .a-type{font-size:8px;letter-spacing:0.28em;text-transform:uppercase;color:var(--cream-dim);margin-bottom:2px}
.altar-item .a-release{appearance:none;background:none;border:none;color:rgba(244,236,220,0.35);font-family:var(--body);font-size:9px;letter-spacing:0.18em;text-transform:uppercase;cursor:pointer;transition:color 200ms ease} .altar-item .a-release:hover{color:var(--cream)}
.altar-empty{margin:auto 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}

/* Goals */
.goal-form{display:flex;flex-direction:column;padding-bottom:22px;border-bottom:1px solid var(--line)}
.cat-picker.one .chip{font-size:11px;padding:8px 12px}
.mine{display:flex;flex-direction:column;gap:8px}
.mine-row{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:16px;background:rgba(244,236,220,0.02);transition:border-color 200ms ease}
.mine-row:hover{border-color:rgba(244,236,220,0.28)}
.mine-row .swatch,.mine-row .m-body{cursor:pointer}
.mine-row .swatch{width:34px;height:34px;border-radius:999px;background-position:center;background-size:cover;box-shadow:0 0 0 1px rgba(244,236,220,0.4);flex:none}
.mine-row .m-body{flex:1;min-width:0}
.mine-row .m-title{font-family:var(--display);font-style:italic;font-weight:300;font-size:15px;color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mine-row .m-meta{font-size:8px;letter-spacing:0.24em;text-transform:uppercase;color:var(--cream-dim);margin-top:3px}
.mine-row .m-del,.mine-row .m-art{appearance:none;background:none;border:none;color:rgba(244,236,220,0.35);font-family:var(--body);font-size:9px;letter-spacing:0.18em;text-transform:uppercase;cursor:pointer;flex:none}
.mine-row .m-del:hover,.mine-row .m-art:hover{color:var(--cream)}
.mine-row .m-art{color:var(--chakra);opacity:0.75} .mine-row .m-art:disabled{opacity:0.3;pointer-events:none}
.mine-row .m-status{color:var(--chakra)} .mine-row .m-status.err{color:rgba(244,236,220,0.4)}
.mine-row .m-theme{display:block;text-transform:none;letter-spacing:0.02em;font-size:10px;color:rgba(244,236,220,0.4);font-style:italic;margin-top:3px}
/* the circle is being painted — it breathes until its art arrives */
.mine-row .swatch.is-painting{animation:painting 1.8s ease-in-out infinite}
.inner-circle.is-painting .inner-image{animation:painting 2.2s ease-in-out infinite}
@keyframes painting{0%,100%{opacity:0.35;box-shadow:0 0 0 1px rgba(244,236,220,0.4)}50%{opacity:1;box-shadow:0 0 14px var(--chakra-glow),0 0 0 1px var(--chakra)}}
.mine-empty{font-size:12px;color:var(--cream-dim);line-height:1.6;font-weight:300;border:1px dashed var(--line);border-radius:16px;padding:16px;max-width:42ch}

/* Sound */
.slider{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;outline:none;margin:2px 0;cursor:pointer;touch-action:none}
.slider::-webkit-slider-runnable-track{height:3px;background:var(--line);border-radius:9px}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-9px;border-radius:999px;background:var(--cream);cursor:pointer;box-shadow:0 0 14px var(--chakra-glow);transition:transform 150ms ease}
.slider::-webkit-slider-thumb:hover{transform:scale(1.15)}
.slider::-moz-range-track{height:3px;background:var(--line);border-radius:9px}
.slider::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:999px;background:var(--cream);cursor:pointer;box-shadow:0 0 14px var(--chakra-glow)}
.hint-line{font-size:11px;color:rgba(244,236,220,0.4);font-style:italic;margin:8px 0 0;min-height:16px}

/* Light Well */
.light-card{border-radius:22px;padding:22px;border:1px solid var(--line);display:flex;flex-direction:column;gap:12px;
  background:radial-gradient(ellipse 90% 70% at 50% 0%,var(--chakra-haze),transparent 70%),linear-gradient(180deg,rgba(244,236,220,0.04),rgba(244,236,220,0.015))}
.lc-cat{font-size:9px;letter-spacing:0.32em;text-transform:uppercase;color:var(--chakra);transition:color 600ms ease}
.lc-quote{font-family:var(--display);font-style:italic;font-weight:300;font-size:19px;line-height:1.5;color:var(--cream)}
.lc-by{font-size:10px;letter-spacing:0.24em;text-transform:uppercase;color:var(--cream-dim)}
.lc-aff{font-family:var(--display);font-weight:300;font-size:21px;line-height:1.45;color:var(--cream);
  border-top:1px solid var(--line);padding-top:14px;animation:affBloom 900ms cubic-bezier(.2,.8,.2,1)}
.lc-aff .lc-aff-label{display:block;font-family:var(--body);font-size:9px;letter-spacing:0.32em;text-transform:uppercase;color:var(--chakra);margin-bottom:8px}
@keyframes affBloom{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.light-actions{display:flex;gap:8px;margin:14px 0 4px}
.light-actions .btn{flex:1;padding:12px 10px;font-size:10px}
.kept-list{display:flex;flex-direction:column;gap:8px}
.kept-row{padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:rgba(244,236,220,0.02);display:flex;gap:10px;align-items:baseline}
.kept-row .k-text{flex:1;font-family:var(--display);font-style:italic;font-weight:300;font-size:14px;color:var(--cream);line-height:1.45}
.kept-row .k-del{appearance:none;background:none;border:none;color:rgba(244,236,220,0.35);font-family:var(--body);font-size:9px;letter-spacing:0.18em;text-transform:uppercase;cursor:pointer;flex:none}
.kept-row .k-del:hover{color:var(--cream)}

/* Pulse */
.pulse-hero{margin:24px 0;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.pulse-hero .big{font-family:var(--display);font-weight:300;font-size:54px;color:var(--chakra);line-height:1;transition:color 600ms ease}
.pulse-hero .sub{font-size:12px;color:var(--cream-dim);letter-spacing:0.06em;max-width:30ch;line-height:1.6}
.witness-line{font-family:var(--display);font-style:italic;font-weight:300;font-size:17px;color:var(--cream);min-height:52px;display:grid;place-items:center;transition:opacity 500ms ease;margin-top:8px}
.power-hour{border:1px solid var(--line);border-radius:18px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(244,236,220,0.03);margin-bottom:10px}
.power-hour .k{font-size:9px;letter-spacing:0.28em;text-transform:uppercase;color:var(--cream-dim);text-align:left;line-height:1.8}
.power-hour .t{font-family:var(--display);font-weight:300;font-size:26px;color:var(--chakra);transition:color 600ms ease}

/* You */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 4px}
.stat-cell{border:1px solid var(--line);border-radius:18px;padding:14px 10px;text-align:center;background:rgba(244,236,220,0.03)}
.stat-cell .v{font-family:var(--display);font-weight:300;font-size:26px;color:var(--cream)} .stat-cell .v em{color:var(--chakra);font-style:normal;font-size:15px;transition:color 600ms ease}
.stat-cell .k{font-size:8px;letter-spacing:0.28em;text-transform:uppercase;color:var(--cream-dim);margin-top:4px}
.days{display:flex;flex-direction:column;gap:8px}
.day-btn{appearance:none;background:transparent;border:1px solid var(--line);color:var(--cream-dim);padding:10px 14px;border-radius:999px;font-family:var(--body);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;text-align:left;cursor:pointer;display:flex;align-items:center;gap:12px;transition:all 200ms ease}
.day-btn .swatch{width:8px;height:8px;border-radius:999px;background:var(--swatch,#fff);box-shadow:0 0 12px var(--swatch,#fff);flex:none}
.day-btn:hover{color:var(--cream);border-color:rgba(244,236,220,0.28)}
.day-btn.active{color:var(--ink);background:var(--cream);border-color:var(--cream)}

/* ---- tune popover: today's colour, adjustable ---- */
.tune-pop{position:fixed;top:74px;right:32px;z-index:8;width:280px;border-radius:22px;padding:18px 18px 16px;
  background:linear-gradient(180deg,rgba(13,17,20,0.97),rgba(7,9,11,0.98));border:1px solid var(--line);
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.85);opacity:0;pointer-events:none;transform:translateY(-6px);
  transition:opacity 320ms ease,transform 420ms cubic-bezier(.2,.8,.2,1)}
.tune-pop.is-on{opacity:1;pointer-events:auto;transform:none}
.tune-pop .field-label{margin-top:0}
.swatch-row{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.c-swatch{appearance:none;width:26px;height:26px;border-radius:999px;cursor:pointer;border:1px solid rgba(244,236,220,0.25);
  background:var(--c);box-shadow:0 0 14px -2px var(--c);transition:transform 180ms ease,box-shadow 180ms ease;padding:0}
.c-swatch:hover{transform:scale(1.15)}
.c-swatch.on{box-shadow:0 0 0 2px var(--ink),0 0 0 3.5px var(--cream),0 0 16px var(--c)}
.c-custom{position:relative;width:26px;height:26px;border-radius:999px;overflow:hidden;cursor:pointer;flex:none;
  border:1px solid rgba(244,236,220,0.25);background:conic-gradient(#C0382B,#E67E22,#F5B400,#3FB27F,#2E86C1,#5D3FD3,#A569BD,#C0382B)}
.c-custom input{position:absolute;inset:-8px;opacity:0;cursor:pointer}
.tune-reset{appearance:none;margin-top:14px;width:100%;background:transparent;border:1px solid var(--line);color:var(--cream-dim);
  border-radius:999px;padding:9px;font-family:var(--body);font-size:9px;letter-spacing:0.24em;text-transform:uppercase;cursor:pointer;transition:all 200ms ease}
.tune-reset:hover{color:var(--cream);border-color:rgba(244,236,220,0.35)}

/* ---- right wing: today / held toggle ---- */
.wing-toggle{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:18px 0 8px}
.wing-toggle .field-label{margin:0}
.wt-btns{display:flex;gap:4px}
.wt-btn{appearance:none;background:transparent;border:1px solid transparent;color:var(--cream-dim);font-family:var(--body);
  font-size:9px;letter-spacing:0.2em;text-transform:uppercase;padding:6px 10px;border-radius:999px;cursor:pointer;transition:all 200ms ease}
.wt-btn:hover{color:var(--cream)}
.wt-btn.on{color:var(--ink);background:var(--cream)}
.wing-empty{font-size:11px;color:var(--cream-dim);font-style:italic;font-family:var(--display);padding:10px 2px;line-height:1.6}

/* ---- per-prayer edit: lives on the row, keeps the stage clean ---- */
.intent-chip .chip-edit{margin-left:auto;flex:none;width:24px;height:24px;border-radius:999px;display:grid;place-items:center;
  opacity:0;color:inherit;font-size:12px;transition:opacity 200ms ease,background 200ms ease}
.intent-chip:hover .chip-edit,.intent-chip.on .chip-edit{opacity:0.65}
.intent-chip .chip-edit:hover{opacity:1;background:rgba(7,9,11,0.14)}
.intent-chip .mine-tag{margin-left:0}

/* ---- favorite star + seen-count on each ritual row ---- */
.intent-chip .chip-fav{flex:none;appearance:none;background:none;border:none;cursor:pointer;font-size:15px;line-height:1;padding:0;width:20px;color:rgba(244,236,220,0.32);transition:color 200ms ease,transform 150ms ease}
.intent-chip .chip-fav:hover{transform:scale(1.18)}
.intent-chip .chip-fav.on{color:var(--gold,#d9b25a);text-shadow:0 0 10px rgba(217,178,90,0.55)}
.intent-chip.on .chip-fav{color:rgba(7,9,11,0.35)} .intent-chip.on .chip-fav.on{color:#a9791a;text-shadow:none}
.intent-chip .chip-seen{flex:none;margin-left:auto;font-size:9px;letter-spacing:0.1em;color:var(--cream-dim);opacity:0.7;font-variant-numeric:tabular-nums}
.intent-chip.on .chip-seen{color:rgba(7,9,11,0.5)}
.intent-chip .chip-seen + .chip-edit{margin-left:8px}
.wing-hint{font-size:10px;letter-spacing:0.06em;color:var(--cream-dim);padding:6px 4px 8px;display:flex;align-items:center;gap:7px;opacity:0.8}
.wing-hint .star{color:var(--gold,#d9b25a);font-size:12px}

/* ---- artwork chooser overlay ---- */
.art-overlay{position:fixed;inset:0;z-index:13;display:grid;place-items:center;padding:28px;
  background:radial-gradient(circle at 50% 50%,rgba(7,9,11,0.75),rgba(7,9,11,0.96));
  opacity:0;pointer-events:none;transition:opacity 400ms ease}
.art-overlay.is-on{opacity:1;pointer-events:auto}
.art-sheet{width:min(760px,94vw);max-height:84vh;display:flex;flex-direction:column;border-radius:26px;padding:22px 24px;
  border:1px solid rgba(244,236,220,0.18);background:linear-gradient(180deg,#0d1114,#07090b)}
.art-sheet .head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.art-sheet h2{font-family:var(--display);font-style:italic;font-weight:300;font-size:22px;margin:0;color:var(--cream)}
.art-grid{overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:16px 12px;padding:14px 2px 6px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.art-cell{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;background:none;border:none;padding:0}
.art-cell .thumb{width:72px;height:72px;border-radius:999px;overflow:hidden;background-position:center;background-size:cover;
  box-shadow:0 0 0 1.5px rgba(244,236,220,0.4),0 0 0 4px rgba(7,9,11,0.7);transition:transform 200ms ease,box-shadow 200ms ease}
.art-cell:hover .thumb{transform:scale(1.08)}
.art-cell.on .thumb{box-shadow:0 0 0 2px var(--chakra),0 0 0 5px rgba(7,9,11,0.7),0 0 22px var(--chakra-glow)}
.art-cell .a-label{font-size:8px;letter-spacing:0.18em;text-transform:uppercase;color:var(--cream-dim);text-align:center;line-height:1.5}
.art-sec{grid-column:1/-1;font-size:10px;letter-spacing:0.32em;text-transform:uppercase;color:var(--cream-dim);
  padding:14px 0 2px;border-top:1px solid var(--line);margin-top:6px}

/* ---- photo upload cell + fit editor ---- */
.art-cell .thumb.up-thumb{display:grid;place-items:center;font-size:24px;color:var(--cream-dim);
  background:rgba(244,236,220,0.04);border:1px dashed rgba(244,236,220,0.3);box-shadow:none}
.art-cell:hover .thumb.up-thumb{color:var(--cream);border-color:var(--chakra)}
.fit-sheet{width:min(480px,94vw)}
.prompt-field{margin-top:16px;font-size:17px;line-height:1.5;resize:none;font-style:italic}
.prompt-field::placeholder{font-size:14px}
.fit-stage{display:grid;place-items:center;padding:20px 0 14px}
.fit-disc{width:min(44vh,320px);aspect-ratio:1/1;border-radius:999px;background-repeat:no-repeat;background-color:#0b0e11;
  box-shadow:0 0 0 2px rgba(244,236,220,0.85),0 0 0 5px rgba(7,9,11,0.7),0 24px 60px -10px rgba(0,0,0,0.7);
  cursor:grab;touch-action:none}
.fit-disc:active{cursor:grabbing}

/* ---- custom frequency input ---- */
.hz-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.hz-row .field{width:120px;font-size:17px;padding:8px 0}
.hz-row .unit{font-size:10px;letter-spacing:0.24em;text-transform:uppercase;color:var(--cream-dim)}

/* ============ OVERLAYS ============ */
.toast{position:fixed;left:50%;bottom:40px;transform:translate(-50%,16px);background:var(--cream);color:var(--ink);padding:12px 20px;border-radius:999px;font-size:11px;letter-spacing:0.08em;opacity:0;pointer-events:none;z-index:30;transition:opacity 400ms ease,transform 400ms ease;white-space:nowrap;max-width:88vw;overflow:hidden;text-overflow:ellipsis}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* Breath — no dimming ceremony. The portal carries the rhythm; the controls
   live in the right wing, so they tuck away with it in full screen. */
.breath-box{margin-top:14px;padding:16px;border:1px solid var(--line);border-radius:18px;display:flex;flex-direction:column;gap:12px;
  background:radial-gradient(ellipse 90% 70% at 50% 0%,var(--chakra-haze),transparent 70%),rgba(244,236,220,0.02)}
.breath-box[hidden]{display:none}
.bb-label{font-family:var(--display);font-style:italic;font-weight:300;font-size:21px;color:var(--cream);min-height:28px}
.breath-patterns{display:flex;flex-wrap:wrap;gap:6px}
.breath-patterns .chip{font-size:10px;padding:7px 11px;letter-spacing:0.06em}
.bb-stop{align-self:flex-start;padding:10px 16px;font-size:10px}

.share-overlay{position:fixed;inset:0;z-index:12;display:grid;place-items:center;padding:32px;background:radial-gradient(circle at 50% 50%,rgba(7,9,11,0.75),rgba(7,9,11,0.96));opacity:0;pointer-events:none;transition:opacity 500ms ease}
.share-overlay.is-on{opacity:1;pointer-events:auto}
/* The share card is a small cinema: living circle, wheeling rings, breathing glow */
.share-card{position:relative;overflow:hidden;width:min(440px,100%);border-radius:28px;padding:38px 30px 28px;text-align:center;border:1px solid rgba(244,236,220,0.18);background:radial-gradient(ellipse 90% 60% at 50% 0%,var(--chakra-haze),transparent 70%),linear-gradient(180deg,#0d1114,#07090b);display:flex;flex-direction:column;gap:12px;align-items:center}
.share-card::before{content:'';position:absolute;top:-110px;left:50%;transform:translateX(-50%);width:380px;height:380px;border-radius:999px;pointer-events:none;
  border:1px solid rgba(244,236,220,0.08);box-shadow:0 0 0 44px rgba(244,236,220,0.025),0 0 0 96px rgba(244,236,220,0.015)}
.share-card .sc-circle{width:136px;height:136px;border-radius:999px;overflow:hidden;position:relative;margin-bottom:6px;
  box-shadow:0 0 0 2px rgba(244,236,220,0.9),0 0 0 6px rgba(7,9,11,0.75),0 0 50px var(--chakra-glow),0 0 130px -20px var(--chakra);
  animation:breathe var(--breath) ease-in-out infinite}
.share-card .sc-circle::before{content:'';position:absolute;inset:-18%;border-radius:999px;pointer-events:none;z-index:2;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,250,238,0.13) 55deg,rgba(255,255,255,0.02) 85deg,transparent 130deg,transparent 215deg,rgba(255,250,238,0.07) 245deg,transparent 285deg);
  mix-blend-mode:screen;filter:blur(6px);animation:sheen 16s linear infinite}
.share-card .sc-circle::after{content:'';position:absolute;inset:0;border-radius:999px;pointer-events:none;z-index:2;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,0.24) 50%,transparent 60%);
  transform:translateX(-130%);mix-blend-mode:screen;animation:glint 11s ease-in-out infinite}
.share-card .sc-circle .inner-image{position:absolute;inset:0}
.share-card .sc-title{font-family:var(--display);font-weight:300;font-size:27px;color:var(--cream);line-height:1.15}
.share-card .sc-affirm{font-family:var(--display);font-style:italic;font-weight:300;font-size:15px;color:var(--cream-dim);max-width:28ch;line-height:1.55}
.share-card .sc-meta{font-size:9px;letter-spacing:0.34em;text-transform:uppercase;color:var(--chakra);transition:color 600ms ease}
.share-actions{display:flex;gap:10px;margin-top:16px;justify-content:center}

/* ============ BARE — just the meditation ============
   One eye in the corner; everything else yields to scene, veil, aura, circle. */
.stage-top .wordmark,.stage-top .top-meta,.stage-top .right > *,.inner-label,.stage-bot{transition:opacity 700ms ease}
html.bare .stage-top .wordmark,html.bare .stage-top .top-meta,
html.bare .stage-top .right > *:not(#btnBare),
html.bare .wing,html.bare .wing-handle,html.bare .stage-bot,
html.bare .tune-pop{opacity:0!important;pointer-events:none!important}
html.bare #btnBare{opacity:0.32}
html.bare .fab-launch,html.bare .fab-flower{opacity:0;pointer-events:none}
html.bare #btnBare:hover{opacity:1}

/* ============ SCENE LEGIBILITY ============
   While a video plays, the type gets shadow and the surfaces turn to glass,
   so even daylight footage cannot wash the ritual out. */
body.has-scene .today-head .greeting,body.has-scene .today-head .focus-label,
body.has-scene .inner-label .type,body.has-scene .inner-label .name,
body.has-scene .top-meta .tm,body.has-scene .wordmark,
body.has-scene .wing-toggle .field-label,body.has-scene .focus-count{
  text-shadow:0 1px 4px rgba(7,9,11,0.75),0 2px 22px rgba(7,9,11,0.9)}
body.has-scene .ritual-card{background-color:rgba(7,9,11,0.5);backdrop-filter:blur(12px)}
body.has-scene .intent-chip{background:rgba(7,9,11,0.45);backdrop-filter:blur(8px)}
body.has-scene .intent-chip.on{background:var(--cream)}
body.has-scene .actions .action{background:rgba(7,9,11,0.45);backdrop-filter:blur(8px)}
body.has-scene .actions .action.is-active{background:linear-gradient(rgba(7,9,11,0.22),rgba(7,9,11,0.22)) var(--chakra)}
body.has-scene .add-inline,body.has-scene .breath-box{background-color:rgba(7,9,11,0.4);backdrop-filter:blur(8px)}
body.has-scene .pulse{background:rgba(7,9,11,0.5);backdrop-filter:blur(8px)}
body.has-scene .icon-btn,body.has-scene .shelf-btn,body.has-scene .wt-btn:not(.on){background:rgba(7,9,11,0.4)}

/* ============ STILLNESS + REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){.halo,.inner-circle,.inner-circle::before,.inner-circle::after,.portal .ring,.heart,.feed-hint,.portal .w-ripple,.panel.is-on,.share-card .sc-circle,.share-card .sc-circle::before,.share-card .sc-circle::after{animation:none!important}}
html.stillness .halo,html.stillness .inner-circle,html.stillness .inner-circle::before,html.stillness .inner-circle::after,html.stillness .portal .ring,html.stillness .heart,html.stillness .feed-hint,html.stillness .share-card .sc-circle,html.stillness .share-card .sc-circle::before,html.stillness .share-card .sc-circle::after{animation:none!important}

/* ============ RESPONSIVE ============ */
/* Laptop — tighter, but the wings still work. */
@media (max-width:1280px){
  .ritual{gap:0 36px;padding:0 32px}
  .portal{width:min(48vh,440px)}
  .intentions{max-height:26vh}
}
/* Narrow — one column, portal in the flow. Wings become plain sections. */
@media (max-width:1024px){
  .app{grid-template-rows:auto 1fr auto}
  .stage-top{padding:16px 18px;gap:10px}
  .top-meta{display:none}
  .shelf-btn .lbl{display:none} .shelf-btn{padding:10px 12px}
  .ritual{grid-template-columns:1fr;grid-template-areas:"head" "portal" "card" "do";gap:22px;padding:8px 20px 20px;overflow-y:auto;align-content:start;scrollbar-width:none}
  .ritual::-webkit-scrollbar{width:0}
  /* Wings dissolve into the single column; no drawers on small screens. */
  .wing.left{display:contents;pointer-events:auto!important}
  .today-head{grid-area:head} .ritual-card{grid-area:card}
  .wing.right{transform:none!important;opacity:1!important;pointer-events:auto!important}
  .wing-handle{display:none}
  .portal{width:min(74vw,340px)}
  .portal-wrap{margin-bottom:44px}
  .intentions{max-height:none;flex-direction:row;overflow-x:auto;overflow-y:hidden;padding-bottom:4px}
  .intent-chip{width:auto;white-space:nowrap;flex:none}
  .intent-chip .mine-tag{margin-left:4px}
  .stage-bot{padding:10px 18px 16px}
  .pulse{font-size:11px;padding:10px 14px}
  .shelf{top:auto;left:0;right:0;width:100%;height:92vh;border-left:none;border-top:1px solid var(--line);border-radius:26px 26px 0 0;transform:translateY(100%);box-shadow:0 -40px 100px -30px rgba(0,0,0,0.9)}
  .shelf.is-on{transform:none}
  .shelf-head{padding-top:14px}
  .altar-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-height:680px){ .portal{width:min(36vh,300px)} }

/* ============ TAKE A CARD (cross-pollinated from Get Answers) ============ */
.card-glyph{position:relative}
.glyph-tip{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-4px);
  white-space:nowrap;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink);
  background:var(--cream);padding:7px 12px;border-radius:999px;opacity:0;pointer-events:none;transition:all 220ms ease;box-shadow:0 10px 30px -12px var(--chakra-glow)}
.card-glyph:hover .glyph-tip{opacity:1;transform:translateX(-50%) translateY(0)}
.card-glyph svg rect{transition:transform 300ms ease}
.card-glyph:hover svg{filter:drop-shadow(0 0 6px var(--chakra-glow))}

/* the ritual dims to 25% while a card is up; sound is never touched */
body.carding .stage-top,body.carding .ritual,body.carding .stage-bot{opacity:0.25;pointer-events:none;filter:blur(2px);transition:opacity 500ms ease,filter 500ms ease}
body.carding .card-glyph{opacity:1!important;filter:none}

.card-scene{position:fixed;inset:0;z-index:16;display:grid;place-items:center;padding:24px;
  perspective:1300px;touch-action:none;opacity:0;transition:opacity 400ms ease;
  background:radial-gradient(ellipse 60% 50% at 50% 50%,transparent,rgba(5,6,7,0.55))}
.card-scene.is-on{opacity:1}
.card-scene[hidden]{display:none}
.card-close{position:absolute;top:20px;right:22px;width:36px;height:36px;border-radius:999px;border:1px solid var(--line);background:rgba(7,9,11,0.6);color:var(--cream);font-size:20px;cursor:pointer;z-index:3}
.card-close:hover{border-color:rgba(244,236,220,0.4)}

.card-pivot{width:min(340px,80vw);aspect-ratio:5/7;position:relative;transform-style:preserve-3d;
  transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform 160ms ease-out;cursor:pointer}
.card-pivot.snap{transition:transform 600ms cubic-bezier(.2,.85,.3,1.08)}
.card-inner{position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform 620ms cubic-bezier(.3,.7,.32,1.02);transform:rotateY(var(--flip,0deg))}
.card-face{position:absolute;inset:0;border-radius:20px;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border:1px solid var(--line);outline:1.5px solid var(--pc,var(--chakra));outline-offset:-6px;
  box-shadow:0 0 60px -6px var(--pc-glow,var(--chakra-glow)),0 40px 90px -30px rgba(0,0,0,0.9);
  display:flex;flex-direction:column;align-items:center;padding:26px 22px;
  background:radial-gradient(ellipse 80% 50% at 50% 0%,var(--pc-glow,var(--chakra-glow)),transparent 60%),linear-gradient(165deg,#131a20,#0a0d10 70%,#07090b)}
/* The FRONT (the drawn card) is the rotated face: it starts hidden behind the back,
   so a draw shows face-down first, then flip=180deg turns the front to the viewer. */
#cardEl{transform:rotateY(180deg)}
/* the sacred oracle back — gold-leaf frame, seed-of-life sigil, chakra-lit core */
.card-back{justify-content:center;gap:14px;
  background:radial-gradient(ellipse 74% 54% at 50% 34%,var(--pc-glow,var(--chakra-glow)),transparent 62%),
    linear-gradient(165deg,#141a1f 0%,#0b1013 60%,#07090b 100%)}
.cb-frame{position:absolute;inset:14px;border-radius:14px;pointer-events:none;
  border:1px solid rgba(217,178,90,0.5);box-shadow:inset 0 0 0 3px rgba(7,9,11,0.6),inset 0 0 0 4px rgba(217,178,90,0.22),inset 0 0 30px rgba(217,178,90,0.10)}
.cb-sigil{width:min(58%,168px);aspect-ratio:1;display:grid;place-items:center;animation:cbBreathe 7s ease-in-out infinite}
.cb-sigil svg{width:100%;height:100%;filter:drop-shadow(0 0 10px var(--pc-glow,var(--chakra-glow)))}
.cb-sigil svg g[stroke]{animation:cbSpin 90s linear infinite;transform-origin:100px 100px}
.cb-sigil svg g[stroke]:nth-of-type(2){animation-duration:60s;animation-direction:reverse}
@keyframes cbSpin{to{transform:rotate(360deg)}}
@keyframes cbBreathe{0%,100%{transform:scale(1);opacity:.94}50%{transform:scale(1.04);opacity:1}}
.cb-word{font-family:var(--display);font-style:italic;font-weight:300;font-size:17px;letter-spacing:0.04em;color:var(--cream)}
.cb-realm{font-size:8px;letter-spacing:0.34em;text-transform:uppercase;color:var(--pc,var(--chakra));opacity:0.85;margin-top:-6px}
.cb-hint{font-size:9px;letter-spacing:0.32em;text-transform:uppercase;color:rgba(244,236,220,0.4);animation:pulseDot 2.6s ease-in-out infinite;margin-top:2px}
@media (prefers-reduced-motion:reduce){.cb-sigil,.cb-sigil svg g[stroke]{animation:none!important}}

.c-rarity{font-size:9px;letter-spacing:0.5em;text-transform:uppercase;color:var(--pc,var(--chakra));opacity:0.95}
.c-art{width:min(56%,150px);aspect-ratio:1;border-radius:999px;margin:14px 0 16px;position:relative;overflow:hidden;
  box-shadow:0 0 0 1.5px rgba(244,236,220,0.7),0 0 0 4px rgba(7,9,11,0.7),0 0 40px var(--pc-glow,var(--chakra-glow))}
.c-art-img{position:absolute;inset:0;background-position:center;background-size:cover}
.c-cat{font-size:9px;letter-spacing:0.32em;text-transform:uppercase;color:var(--pc,var(--chakra))}
.c-title{font-family:var(--display);font-weight:300;font-size:23px;line-height:1.2;text-align:center;color:var(--cream);margin:6px 0 8px}
.c-realm{font-size:9px;letter-spacing:0.28em;text-transform:uppercase;color:var(--cream-dim)}
.c-affirm{font-family:var(--display);font-style:italic;font-weight:300;font-size:17px;line-height:1.45;text-align:center;color:var(--cream);margin-top:14px;max-width:26ch;opacity:0;transform:translateY(6px);transition:all 700ms ease}
.c-affirm.show{opacity:1;transform:none}
.c-affirm-btn{margin-top:16px;font-size:10px;padding:11px 18px}

/* holo + glare + rarity, distilled from the oracle */
.card-holo{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:color-dodge;
  background:linear-gradient(115deg,transparent 20%,rgba(0,229,255,.28) 38%,rgba(255,0,229,.20) 50%,rgba(255,215,0,.26) 62%,transparent 80%);background-size:230% 230%;background-position:var(--gx,50%) 50%}
.card-glare{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:var(--glare,0);transition:opacity 300ms ease;
  background:radial-gradient(42% 30% at var(--gx,50%) var(--gy,28%),rgba(255,255,255,.4),transparent 72%)}
.card-face.holo-rare .card-holo{opacity:.38;background:linear-gradient(115deg,transparent 28%,rgba(147,112,219,.34) 46%,rgba(230,230,250,.22) 54%,transparent 74%)}
.card-face.holo-epic .card-holo{opacity:.55}
.card-face.holo-legendary{outline-color:#FFD700}
.card-face.holo-legendary .card-holo{opacity:.7;background:linear-gradient(115deg,transparent 41%,rgba(255,215,0,.34) 47%,rgba(255,255,255,.32) 50%,rgba(255,165,0,.30) 53%,transparent 59%);background-size:260% 260%;background-repeat:no-repeat;animation:legsweep 4.6s ease-in-out infinite}
@keyframes legsweep{0%{background-position:210% 50%}100%{background-position:-110% 50%}}
.card-sparkles{position:absolute;inset:0;pointer-events:none;display:none}
.card-face.holo-legendary .card-sparkles{display:block}
.card-sparkles i{position:absolute;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle,#fff,#FFD700 40%,transparent 72%);animation:sparktw 2.4s ease-in-out infinite}
.card-sparkles i:nth-child(1){top:12%;left:14%} .card-sparkles i:nth-child(2){top:20%;right:12%;animation-delay:.6s}
.card-sparkles i:nth-child(3){top:44%;left:8%;animation-delay:1.1s} .card-sparkles i:nth-child(4){bottom:26%;right:10%;animation-delay:1.6s}
.card-sparkles i:nth-child(5){bottom:14%;left:18%;animation-delay:.8s} .card-sparkles i:nth-child(6){top:8%;right:34%;animation-delay:2s}
@keyframes sparktw{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}
.card-actions{position:absolute;bottom:26px;left:0;right:0;display:flex;justify-content:center;gap:10px}
@media (max-width:820px){ .card-pivot{width:min(300px,82vw)} .card-actions{bottom:18px} }

/* ============ CARD — S-TIER LEVEL-UP (Thoughtfulls / Light Well DNA) ============
   Chakra-coloured rays + halo surround a gold star-field that orbits the card.
   Gold is the system's tie (STYLE.md) so it reads sacred at any chakra. Everything
   scales by rarity via #cardScene.r1..r4. Motion parks under prefers-reduced-motion. */

/* the surround sits behind the card, centred on it, larger than it, never clipped */
.card-halo{position:absolute;top:50%;left:50%;width:min(560px,120vw);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;z-index:0;opacity:0;transition:opacity 700ms ease;--ring:212px}
.card-scene.is-on .card-halo{opacity:1}
/* warm gold bloom behind every card — the Light Well signature glow */
.card-halo::before{content:'';position:absolute;inset:14%;border-radius:999px;
  background:radial-gradient(circle,rgba(255,205,90,.22),rgba(255,180,60,.10) 45%,transparent 70%);
  mix-blend-mode:screen;animation:haloPulse 6s ease-in-out infinite}
@keyframes haloPulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.08);opacity:1}}
/* rotating conic rays — gold, so they read against the chakra-coloured portal behind */
.card-rays{position:absolute;inset:0;border-radius:999px;opacity:0.5;mix-blend-mode:screen;
  background:conic-gradient(from 0deg,
    transparent 0deg,rgba(255,215,0,.34) 7deg,transparent 20deg,
    transparent 50deg,rgba(255,200,120,.20) 64deg,transparent 80deg,
    transparent 126deg,rgba(255,215,0,.34) 138deg,transparent 154deg,
    transparent 204deg,rgba(255,200,120,.20) 218deg,transparent 234deg,
    transparent 286deg,rgba(255,215,0,.34) 298deg,transparent 314deg,
    transparent 342deg,rgba(255,200,120,.18) 351deg,transparent 360deg);
  animation:cardRays 44s linear infinite}
@keyframes cardRays{to{transform:rotate(360deg)}}
/* the golden star-field: a ring of stars orbiting the card, slow spin + individual twinkle.
   Radius is a px length (--ring): translateY percentages resolve against the 8px star, not
   the ring, which silently stacked every star at the centre. */
.card-orbit{position:absolute;inset:0;animation:cardOrbit 60s linear infinite}
@keyframes cardOrbit{to{transform:rotate(360deg)}}
.card-orbit i{position:absolute;top:50%;left:50%;width:8px;height:8px;margin:-4px;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#FFD700 42%,transparent 72%);
  transform:rotate(var(--a)) translateY(calc(var(--ring) * var(--rf,1) * -1)) scale(var(--s,1));
  animation:starTw var(--tw,3s) ease-in-out infinite;animation-delay:var(--d,0s);opacity:.5}
/* a visible floor so the ring of gold stars always reads, twinkling brighter in turn */
@keyframes starTw{0%,100%{opacity:.5;filter:drop-shadow(0 0 3px rgba(255,185,40,.8))}50%{opacity:1;filter:drop-shadow(0 0 9px rgba(255,205,80,1))}}
/* 14 stars ringed around; angle/radius-factor/size/speed varied so it never reads mechanical */
.card-orbit i:nth-child(1){--a:0deg;--rf:1;--s:1;--tw:2.8s;--d:0s}
.card-orbit i:nth-child(2){--a:26deg;--rf:1.08;--s:.7;--tw:3.4s;--d:.4s}
.card-orbit i:nth-child(3){--a:51deg;--rf:.95;--s:1.2;--tw:2.4s;--d:1.1s}
.card-orbit i:nth-child(4){--a:77deg;--rf:1.05;--s:.8;--tw:3.1s;--d:.7s}
.card-orbit i:nth-child(5){--a:103deg;--rf:.98;--s:1;--tw:2.6s;--d:1.6s}
.card-orbit i:nth-child(6){--a:129deg;--rf:1.1;--s:.65;--tw:3.6s;--d:.2s}
.card-orbit i:nth-child(7){--a:154deg;--rf:.93;--s:1.1;--tw:2.9s;--d:1.3s}
.card-orbit i:nth-child(8){--a:180deg;--rf:1.02;--s:.85;--tw:3.2s;--d:.5s}
.card-orbit i:nth-child(9){--a:206deg;--rf:1.07;--s:1;--tw:2.5s;--d:1.9s}
.card-orbit i:nth-child(10){--a:231deg;--rf:.95;--s:.75;--tw:3.5s;--d:.9s}
.card-orbit i:nth-child(11){--a:257deg;--rf:1.04;--s:1.15;--tw:2.7s;--d:1.4s}
.card-orbit i:nth-child(12){--a:283deg;--rf:.97;--s:.8;--tw:3.3s;--d:.3s}
.card-orbit i:nth-child(13){--a:309deg;--rf:1.09;--s:1;--tw:2.6s;--d:1.7s}
.card-orbit i:nth-child(14){--a:334deg;--rf:.94;--s:.7;--tw:3.4s;--d:.6s}

/* pop-open on draw — the Thoughtfulls signature */
.card-scene.is-on .card-pivot{animation:cardBloom .8s cubic-bezier(.2,.85,.3,1.12)}
@keyframes cardBloom{0%{transform:rotateX(0) rotateY(0) scale(.55) translateY(14px);opacity:0}55%{opacity:1}100%{transform:none;opacity:1}}
/* the card idly floats so it feels alive, not pinned */
.card-inner{will-change:transform}
.card-pivot{animation:cardFloat 7s ease-in-out infinite}
.card-scene.is-on .card-pivot{animation:cardBloom .8s cubic-bezier(.2,.85,.3,1.12),cardFloat 7s ease-in-out 0.8s infinite}
@keyframes cardFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}

/* continuous gold foil shimmer sweeping the whole card */
.card-shimmer{position:absolute;inset:0;pointer-events:none;z-index:1;mix-blend-mode:overlay;opacity:.5;
  background:linear-gradient(115deg,transparent 34%,rgba(255,215,0,.28) 46%,rgba(255,255,255,.5) 50%,rgba(255,190,80,.28) 54%,transparent 66%);
  background-size:250% 250%;background-repeat:no-repeat;animation:cardShimmer 5.5s ease-in-out infinite}
@keyframes cardShimmer{0%{background-position:200% 50%}100%{background-position:-100% 50%}}
/* a thin gold-leaf inner edge — the system's tie, on every card */
.card-goldedge{position:absolute;inset:0;pointer-events:none;z-index:2;border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(255,215,0,.32),inset 0 0 14px rgba(255,200,110,.14)}

/* ---- rarity scales the whole spectacle ---- */
/* even Common reads clearly upgraded — the gold stars + bloom always show */
.card-scene.r1 .card-rays{opacity:.4} .card-scene.r1 .card-orbit i:nth-child(n+12){display:none}
.card-scene.r2 .card-rays{opacity:.55}
.card-scene.r3 .card-rays{opacity:.7} .card-scene.r3 .card-shimmer{animation-duration:4s;opacity:.62}
.card-scene.r4 .card-rays{opacity:.9;animation-duration:26s}
.card-scene.r4 .card-orbit{animation-duration:34s}
.card-scene.r4 .card-orbit i{width:9px;height:9px;margin:-4.5px}
.card-scene.r4 .card-shimmer{animation-duration:3.2s;opacity:.8;
  background:linear-gradient(115deg,transparent 40%,rgba(255,215,0,.5) 47%,rgba(255,255,255,.7) 50%,rgba(255,150,60,.42) 53%,transparent 60%)}
.card-scene.r4 .card-goldedge{box-shadow:inset 0 0 0 1.5px rgba(255,215,0,.6),inset 0 0 22px rgba(255,205,120,.28)}
.card-scene.r4 .c-rarity{color:#FFD26A;text-shadow:0 0 10px rgba(255,215,0,.55)}

/* reveal fanfare — a gold burst when the card turns */
.card-burst{position:absolute;top:50%;left:50%;width:10px;height:10px;transform:translate(-50%,-50%);pointer-events:none;z-index:5}
.card-burst i{position:absolute;top:0;left:0;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle,#fff,#FFD700 50%,transparent 72%);
  transform:rotate(var(--a)) translateY(0);animation:burstOut .9s ease-out forwards}
@keyframes burstOut{0%{opacity:1;transform:rotate(var(--a)) translateY(0) scale(1)}100%{opacity:0;transform:rotate(var(--a)) translateY(-120px) scale(.3)}}

@media (prefers-reduced-motion:reduce){
  .card-rays,.card-orbit,.card-orbit i,.card-shimmer,.card-pivot,.card-scene.is-on .card-pivot{animation:none!important}
  .card-orbit i{opacity:.6}
}
/* mobile: shrink the surround so it doesn't spill off a narrow screen */
@media (max-width:820px){ .card-halo{width:min(420px,108vw);--ring:158px} }

/* ============ DISCOVER — "Tinder for Rituals" ============ */
.choose-cta{border-style:dashed!important;border-color:var(--chakra)!important}
.choose-cta .swatch.cta{background:radial-gradient(circle,var(--chakra),#07090b);display:grid;place-items:center}
.choose-cta .swatch.cta::after{content:'✦';font-size:11px;color:var(--ink)}
.intent-chip .mine-tag.seed{color:var(--cream-dim);opacity:.7}

.discover{position:fixed;inset:0;z-index:18;display:flex;flex-direction:column;align-items:center;
  background:radial-gradient(ellipse 70% 60% at 50% 30%,rgba(13,17,20,0.85),rgba(5,6,7,0.97));backdrop-filter:blur(14px);
  opacity:0;pointer-events:none;transition:opacity 360ms ease}
.discover.is-on{opacity:1;pointer-events:auto}
.discover[hidden]{display:none}
.dv-head{width:100%;max-width:520px;display:flex;align-items:center;justify-content:space-between;padding:22px 24px 8px}
.dv-title{font-family:var(--display);font-style:italic;font-weight:300;font-size:22px;color:var(--cream)}
.dv-close{width:36px;height:36px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--cream);font-size:20px;cursor:pointer;transition:border-color 200ms ease}
.dv-close:hover{border-color:rgba(244,236,220,0.4)}
.dv-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:min(600px,94vw);padding:6px 24px 4px;scrollbar-width:none}
/* second level — the sub-categories of the chosen life-area, read as a tier down */
.dv-subfilters{padding-top:0;padding-bottom:8px}
.dv-subfilters[hidden]{display:none}
.dv-subfilters .dv-chip{font-size:10px;padding:6px 11px;opacity:0.92;border-color:rgba(244,236,220,0.09)}
.dv-subfilters .dv-chip.on{opacity:1}
.dv-filters::-webkit-scrollbar{height:0}
.dv-chip{flex:none;display:inline-flex;align-items:center;gap:7px;appearance:none;background:transparent;border:1px solid var(--line);color:var(--cream-dim);border-radius:999px;padding:8px 13px;font-family:var(--body);font-size:11px;letter-spacing:0.08em;cursor:pointer;white-space:nowrap;transition:all 200ms ease}
.dv-chip .dot{width:8px;height:8px;border-radius:999px;flex:none}
.dv-chip:hover{color:var(--cream)} .dv-chip.on{color:var(--ink);background:var(--cream);border-color:var(--cream)}

.dv-stage{position:relative;width:min(360px,86vw);flex:1;max-height:60vh;margin:14px 0;display:grid;place-items:center}
.dv-card{position:absolute;inset:0;border-radius:26px;overflow:hidden;cursor:grab;touch-action:none;user-select:none;
  border:1px solid var(--line);outline:1.5px solid var(--pc,var(--chakra));outline-offset:-6px;
  box-shadow:0 0 60px -8px var(--pc-glow),0 40px 90px -30px rgba(0,0,0,0.9);
  background:radial-gradient(ellipse 80% 40% at 50% 0%,var(--pc-glow),transparent 60%),linear-gradient(170deg,#141a20,#0a0d10 72%,#07090b);
  display:flex;flex-direction:column;align-items:center;padding:30px 24px;will-change:transform}
.dv-card:active{cursor:grabbing}
.dvc-glow{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(217,178,90,0.14)}
.dvc-art{width:min(38%,115px);aspect-ratio:1;border-radius:999px;background-position:center;background-size:cover;margin:10px 0 14px;
  box-shadow:0 0 0 1.5px rgba(244,236,220,0.7),0 0 0 4px rgba(7,9,11,0.7),0 0 44px var(--pc-glow)}
.dvc-cat{font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:var(--pc,var(--chakra));text-align:center;padding:0 18px;line-height:1.5;text-wrap:balance;margin-bottom:2px}
.dvc-title{font-family:var(--display);font-weight:300;font-size:24px;line-height:1.2;text-align:center;color:var(--cream);margin:2px 0 10px;max-width:90%}
.dvc-realm{font-size:9px;letter-spacing:0.28em;text-transform:uppercase;color:var(--cream-dim);margin-top:auto}
.dvc-stamp{position:absolute;top:26px;padding:6px 14px;border-radius:8px;font-family:var(--body);font-weight:700;font-size:15px;letter-spacing:0.18em;text-transform:uppercase;opacity:0;pointer-events:none;transform:rotate(-12deg)}
.dvc-stamp.like{left:22px;color:#7BE0A6;border:2px solid #7BE0A6}
.dvc-stamp.nope{right:22px;color:#E0857B;border:2px solid #E0857B;transform:rotate(12deg)}
.dv-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;color:var(--cream-dim);font-size:14px;font-weight:300}
.dv-empty-mark{width:60px;height:60px;border-radius:999px;background:radial-gradient(circle at 50% 40%,var(--chakra),#07090b 70%);box-shadow:0 0 40px var(--chakra-glow);opacity:.6}

.dv-actions{display:flex;align-items:center;gap:18px;padding:10px 0 6px}
.dv-btn{width:60px;height:60px;border-radius:999px;border:1px solid var(--line);background:rgba(244,236,220,0.04);cursor:pointer;display:grid;place-items:center;color:var(--cream);transition:transform 180ms ease,border-color 200ms ease,box-shadow 200ms ease}
.dv-btn svg{width:24px;height:24px}
.dv-btn:hover{transform:translateY(-3px)}
.dv-btn.keep{width:70px;height:70px;color:#7BE0A6;border-color:rgba(123,224,166,0.5)} .dv-btn.keep:hover{box-shadow:0 12px 30px -10px rgba(123,224,166,0.5)}
.dv-btn.pass{color:#E0857B;border-color:rgba(224,133,123,0.4)} .dv-btn.pass:hover{box-shadow:0 12px 30px -10px rgba(224,133,123,0.4)}
.dv-btn.undo{width:48px;height:48px;color:var(--cream-dim)}
.dv-count{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--cream-dim);padding:6px 0 20px}
@media(max-width:820px){.dv-stage{max-height:56vh}.dv-btn{width:54px;height:54px}.dv-btn.keep{width:64px;height:64px}}

/* Onboarding vessel: the brand emblem held as a living presence while empty */
.ob-emblem{position:absolute;inset:2%;border-radius:999px;pointer-events:none;z-index:4;
  background:url('../assets/brand/emblem-flower.png') center/contain no-repeat;
  filter:drop-shadow(0 0 22px rgba(201,162,74,0.45));
  animation:heldBreath calc(var(--breath) * 1.5) ease-in-out infinite}
.inner-circle:not(.empty) .ob-emblem{display:none}
html.stillness .ob-emblem{animation:none!important}
@media (prefers-reduced-motion:reduce){.ob-emblem{animation:none!important}}


/* Quick hover hints for icon buttons — same pill as the card glyph */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 10px);left:50%;
  transform:translateX(-50%) translateY(-4px);white-space:nowrap;font-size:10px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--ink);background:var(--cream);padding:7px 12px;border-radius:999px;
  opacity:0;pointer-events:none;transition:all 220ms ease;box-shadow:0 10px 30px -12px var(--chakra-glow);z-index:40}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){[data-tip]::after{transition:opacity 120ms ease}}

/* Sound panel — collapsible layers, each with its own accent colour */
.snd-sec{margin:8px 0;flex:none;border-radius:12px;overflow:hidden;background:rgba(255,255,255,0.025);
  border-left:3px solid var(--sec,var(--line));transition:background 200ms ease}
.snd-sec[open]{background:rgba(255,255,255,0.05)}
.snd-sec > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:14px 15px;font-family:var(--body);font-size:14.5px;font-weight:600;user-select:none}
.snd-sec > summary::-webkit-details-marker{display:none}
.snd-name{color:var(--sec,var(--cream));letter-spacing:0.01em}
.snd-hint{margin-left:auto;font-size:10.5px;letter-spacing:0.02em;color:var(--cream-dim);font-weight:400;white-space:nowrap}
.snd-sec > summary::after{content:'';flex:none;width:7px;height:7px;margin-left:2px;
  border-right:1.5px solid var(--sec,var(--cream-dim));border-bottom:1.5px solid var(--sec,var(--cream-dim));
  transform:rotate(45deg);transition:transform 220ms ease}
.snd-sec[open] > summary::after{transform:rotate(-135deg)}
.snd-body{padding:2px 15px 16px}
.snd-body .cat-picker{margin-top:4px}
.snd-volume{flex:none;padding-top:16px;margin-top:6px;border-top:1px solid var(--line)}

/* per-layer volume mixer */
.mini-vol{display:flex;align-items:center;gap:10px;margin-top:12px}
.mini-vol span{font-size:11px;letter-spacing:0.05em;color:var(--cream-dim);white-space:nowrap}
.mini-vol .slider{flex:1}
.snd-mixer{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.snd-mixer:empty{display:none}
.mix-row{display:flex;align-items:center;gap:10px}
.mix-name{font-size:11px;letter-spacing:0.03em;color:var(--cream);min-width:96px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mix-row .slider{flex:1}
@media (prefers-reduced-motion:reduce){.snd-sec > summary::after{transition:none}}

/* Music packs — locked until purchased */
.pack-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip.locked{opacity:0.6;border-style:dashed;cursor:pointer}
.chip.locked:hover{opacity:0.85;border-color:var(--chakra,#c9a24a)}

/* Sound sigils — glyph grid you pick from */
.snd-glyphs{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:9px;margin-top:6px}
.snd-glyph{position:relative;aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--line);border-radius:13px;background:transparent;color:var(--cream-dim);cursor:pointer;transition:all 200ms ease}
.snd-glyph svg{width:23px;height:23px}
.snd-glyph:hover{color:var(--cream);border-color:rgba(244,236,220,0.32)}
.snd-glyph.on{color:var(--ink);background:var(--cream);border-color:var(--cream);box-shadow:0 6px 18px -9px var(--chakra-glow)}

/* Locked sound sigils — grayed until the pack is unlocked */
.snd-glyph.locked{opacity:0.4;border-style:dashed}
.snd-glyph.locked:hover{opacity:0.7;border-color:var(--chakra,#c9a24a)}
.snd-glyph.locked.on{opacity:0.4;background:transparent;color:var(--cream-dim);box-shadow:none}


/* fluid field scene layer (behind the aura, above the room) */
.fluid-bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:none;mix-blend-mode:screen}
.fluid-bg.on{display:block}
.fluid-ctrl{margin-top:6px}
.fluid-ctrl .lab{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;margin:12px 0 5px}
.fluid-ctrl .lab span{color:var(--cream-dim);font-variant-numeric:tabular-nums;font-size:11px}

.fluid-toggle{display:flex;align-items:center;gap:10px;margin:12px 0 6px;font-size:13px;font-weight:600;cursor:pointer}
.fluid-toggle input{width:18px;height:18px;accent-color:var(--gold,#c9a24a)}

/* ritual circle — cursor interaction (parallax art + sheen + sparks) */
.portal-wrap{position:relative}
#homePortal .inner-circle{perspective:720px}
#homePortal .inner-image{transition:opacity 600ms ease, transform .14s ease-out;will-change:transform}
.portal-sheen{position:absolute;inset:0;border-radius:999px;pointer-events:none;z-index:4;opacity:0;transition:opacity .3s ease;mix-blend-mode:screen;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.45),transparent 44%)}
.hc-spark{position:absolute;width:7px;height:7px;border-radius:50%;pointer-events:none;z-index:6;transform:translate(-50%,-50%);
  background:radial-gradient(circle,#fff 10%,var(--chakra) 55%,transparent 72%);animation:hcSpark .8s ease-out forwards}
@keyframes hcSpark{0%{opacity:1;transform:translate(-50%,-50%) scale(.25)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.4)}}
@media(prefers-reduced-motion:reduce){#homePortal .inner-image{transition:opacity 600ms ease}.hc-spark{display:none}}

/* ============================================================
   MOBILE HYBRID (≤820px) — centered circle · emblem FAB launcher
   · glass action dock · bottom-sheet. Desktop cascade untouched.
   ============================================================ */
.fab-launch{display:none}
.fab-flower{display:none}
.shelf-grab{display:none}
@media (max-width:1200px){
  :root{--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}

  .app{grid-template-rows:auto 1fr;height:100dvh}
  .stage-bot{display:none}
  #shelfOpen{display:none}                     /* the FAB replaces the menu button */

  .stage-top{grid-template-columns:1fr auto;grid-template-areas:"brand icons" "meta meta";row-gap:9px;column-gap:8px;padding:calc(10px + var(--safe-t)) 16px 8px}
  .stage-top .wordmark{grid-area:brand;justify-self:start;font-size:15px}
  .stage-top .right{grid-area:icons}
  .top-meta{grid-area:meta;display:flex;justify-self:center}

  /* THE STAGE — circle is the hero, dead-centre */
  .ritual{grid-template-columns:1fr;grid-template-areas:"portal";grid-template-rows:1fr;
    gap:0;padding:0 16px calc(170px + var(--safe-b));overflow:hidden;place-items:center}
  .wing.left{display:none!important}
  .wing.right{grid-area:do;display:block;transform:none!important;opacity:1!important;pointer-events:auto!important}
  .portal-wrap{grid-area:portal;align-self:center;margin:0}
  .portal{width:min(74vw,52vh)}
  .inner-label{bottom:-46px}
  .inner-label .name{font-size:17px}

  /* today's circle — a tidy horizontal carousel just above the dock */
  /* minimal stage: quick icons up top (colour · cards · sounds), day list hidden, flower launcher below */
  .stage-top .right{display:flex;gap:6px}
  .stage-top .right>#btnKeep,.stage-top .right>#btnFull,.stage-top .right>#shelfOpen,.stage-top .right>#btnSoundsTop{display:none}
  .wing-toggle,.intentions,.wing.right>.field-label{display:none}
  .breath-box,.add-inline{display:none}
  .wing-handle{display:none}

  .actions{display:none}   /* replaced by the emblem flower */

  /* EMBLEM FAB — bottom centre, opens the shelf */
  .fab-launch{position:fixed;left:50%;bottom:calc(12px + var(--safe-b));transform:translateX(-50%);
    display:block;width:74px;height:74px;border-radius:0;border:none;padding:0;z-index:14;cursor:pointer;background:none;
    background-image:url('../assets/brand/emblem-flower.png');background-size:contain;background-position:center;background-repeat:no-repeat;
    filter:drop-shadow(0 5px 14px rgba(0,0,0,.5)) drop-shadow(0 0 16px var(--chakra-glow));
    transition:transform .2s cubic-bezier(.2,.8,.2,1),filter .3s ease}
  .fab-launch:active{transform:translateX(-50%) scale(.9)}
  html.shelf-open .fab-launch{transform:translateX(-50%) scale(.8);opacity:.5}

  /* EMBLEM FLOWER — tap the emblem, it blooms the actions in an arc */
  .fab-flower{display:block;position:fixed;left:50%;bottom:calc(47px + var(--safe-b));width:0;height:0;z-index:13;pointer-events:none}
  html:not(.in-app) .fab-launch,html:not(.in-app) .fab-flower{display:none!important}
  .petal{position:absolute;left:0;top:0;width:58px;height:58px;margin:-29px;border-radius:50%;padding:0;cursor:pointer;
    display:grid;place-items:center;color:var(--cream);
    background:rgba(16,18,22,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border:none;box-shadow:0 8px 26px -8px rgba(0,0,0,.7);
    transform:translate(0,0) scale(.2);opacity:0;pointer-events:none;
    transition:transform .38s cubic-bezier(.2,.9,.3,1.4),opacity .22s ease}
  .petal svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .petal span{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-dim);white-space:nowrap}
  html.flower-open .petal{opacity:1;pointer-events:auto}
  html.flower-open .petal:nth-child(1){transform:translate(-116px,-34px) scale(1);transition-delay:.02s}
  html.flower-open .petal:nth-child(2){transform:translate(-42px,-104px) scale(1);transition-delay:.06s}
  html.flower-open .petal:nth-child(3){transform:translate(42px,-104px) scale(1);transition-delay:.10s}
  html.flower-open .petal:nth-child(4){transform:translate(116px,-34px) scale(1);transition-delay:.14s}
  html.flower-open .fab-launch{transform:translateX(-50%) rotate(135deg) scale(1.05)}

  /* BOTTOM SHEET — grabber + rounded, safe-area */
  .shelf{top:auto;left:0;right:0;width:100%;height:88dvh;border-left:none;border-top:1px solid var(--line);
    border-radius:22px 22px 0 0;transform:translateY(100%);box-shadow:0 -40px 100px -30px rgba(0,0,0,.9);
    padding-bottom:var(--safe-b)}
  .shelf.is-on{transform:none}
  .shelf-grab{display:block;width:40px;height:5px;border-radius:99px;background:rgba(244,236,220,.28);margin:9px auto 2px;flex:none}
  .shelf-head{padding-top:6px}
  .altar-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1200px) and (max-height:680px){ .portal{width:min(58vw,38vh)} }

/* login is optional — a quiet skip */
.ob-skip{display:block;margin:16px auto 0;background:none;border:none;color:var(--cream-dim);font-size:12px;letter-spacing:.04em;cursor:pointer;text-decoration:underline;text-underline-offset:3px;transition:color .2s ease}
.ob-skip:hover{color:var(--cream)}

/* sounds shortcut is a mobile-only top icon */
#btnSoundsTop{display:none}

/* FREQUENCY DIAL — tap the Hz → radial selector (Solfeggio ring · beat ring · core builder) */
#topHz.is-tappable{cursor:pointer;position:relative}
#topHz.is-tappable::after{content:'';position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3px solid var(--chakra);opacity:.65}
.hz-wheel{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hz-wheel.is-on{display:flex}
.hz-dial{position:relative;width:min(88vw,360px);aspect-ratio:1;animation:dialIn .34s cubic-bezier(.2,.9,.3,1.25)}
@keyframes dialIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
.hz-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(244,236,220,.09);pointer-events:none}
.hz-ring-out{width:88%;height:88%}
.hz-ring-in{width:54%;height:54%}
.hz-nodes{position:absolute;inset:0;pointer-events:none}
.hz-node{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;
  display:grid;place-items:center;border-radius:50%;padding:0;overflow:hidden;
  background:rgba(16,18,22,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(244,236,220,.12);color:var(--cream-dim);font-variant-numeric:tabular-nums;
  transition:color .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease}
.hz-node.hz-out{width:46px;height:46px;font-size:13px}
.hz-node.hz-in{width:52px;height:52px;font-size:10px;letter-spacing:.03em;text-transform:uppercase}
.hz-node:hover{color:var(--cream);border-color:rgba(244,236,220,.32)}
.hz-node.is-sel{color:#0b0d10;background:var(--chakra);border-color:transparent;font-weight:600;box-shadow:0 0 22px -2px var(--chakra-glow)}
.hz-node.is-today::after{content:'';position:absolute;top:3px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:#E9C46A;box-shadow:0 0 6px #E9C46A}
.hz-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:32%;height:32%;border-radius:50%;
  display:grid;place-items:center;gap:1px;cursor:pointer;padding:0;
  background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.12),rgba(16,18,22,.94));
  border:1px solid rgba(201,162,74,.42);color:var(--cream);
  box-shadow:0 0 42px -8px var(--chakra-glow),inset 0 0 22px -8px var(--chakra-glow);transition:transform .18s ease}
.hz-core:active{transform:translate(-50%,-50%) scale(.93)}
.hz-core b{font-size:20px;font-weight:600;line-height:1}
.hz-core span{font-size:7px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-dim)}

/* master Soundscape on/off — a clear switch at the top of the Sound panel */
.snd-master-row{display:flex;align-items:center;justify-content:space-between;margin:2px 0 16px;padding:13px 15px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)}
.snd-master-lbl{font-size:13px;letter-spacing:.05em;color:var(--cream)}
.snd-switch{position:relative;width:48px;height:27px;border-radius:999px;border:none;background:rgba(244,236,220,.16);cursor:pointer;padding:0;flex:none;transition:background .25s ease}
.snd-switch .ss-knob{position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:var(--cream);box-shadow:0 1px 4px rgba(0,0,0,.4);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.snd-switch[aria-checked="true"]{background:var(--chakra)}
.snd-switch[aria-checked="true"] .ss-knob{transform:translateX(21px)}

/* Fluid/Cymatics mode selector */
.fluid-mode{display:flex;gap:6px;margin:12px 0 14px;padding:4px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)}
.fm-btn{flex:1;padding:9px 0;border:none;border-radius:9px;background:transparent;color:var(--cream-dim);font:inherit;font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .2s ease,color .2s ease}
.fm-btn.on{background:var(--chakra);color:#0b0d10;font-weight:600}
#fluidControls.mode-cymatics .fx-smoke{display:none}
#fluidControls:not(.mode-cymatics) .fx-cyma{display:none}

/* The scene video + fluid field belong to the app room — never the onboarding/auth screens,
   which keep their own calm aura background. Gated by the .in-app flag set in enterApp(). */
html:not(.in-app) .video-bg,
html:not(.in-app) .fluid-bg{opacity:0!important;pointer-events:none!important}

/* Profile → account box: sign-in status, admin badge, log out */
.acct-box{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:2px 0 18px}
.acct-who{font-size:13px;color:var(--cream-dim)}
.acct-badge{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;background:var(--chakra);color:#0b0d10;font-size:9px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;vertical-align:middle}

/* Cymatics is a stained-glass mandala, not a light overlay — render it opaque so it
   becomes the background rather than muddying the scene video. Smoke keeps screen blend. */
html.cyma-on .fluid-bg{mix-blend-mode:normal}

/* nav glyphs stay legible over bright scenes */
.icon-btn svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,0.5))}
.stage-top .wordmark{text-shadow:0 1px 3px rgba(7,9,11,0.55),0 2px 14px rgba(7,9,11,0.6)}
.stage-top .wordmark img{filter:drop-shadow(0 1px 3px rgba(0,0,0,0.5))}