:root {
  color-scheme:light;
  --ink:#17132f;
  --paper:#f9fbf8;
  --mist:#eaf5ec;
  --lilac:#f1edfa;
  --violet:#6c3cff;
  --button:#5230bc;
  --cyan:#24d4d0;
  --focus:#007d84;
  --error:#bd214c;
  --on-sign:#FFFFFF;
  --muted:#655f79;
  --line:rgba(23,19,47,.14);
  --glass:rgba(255,255,255,.76);
  --glass-solid:#fff;
  --caution:#17132f;
  --caution-copy:#f7f5ff;
  --metric-love:#6c3cff;
  --metric-intuition:#d82f78;
  --metric-focus:#007f83;
  --shadow:0 28px 86px rgba(11,8,31,.2);
  --active-control-surface:#EAF3DF;
  --active-control-ink:#17132F;
}

[data-theme="dark"] {
  color-scheme:dark;
  --ink:#f7f5ff;
  --paper:#111022;
  --mist:#19172f;
  --lilac:#23203c;
  --violet:#b7a6ff;
  --button:#6f4fd1;
  --cyan:#54e4df;
  --focus:#54e4df;
  --error:#ff98b0;
  --on-sign:#111022;
  --muted:#bcb6ce;
  --line:rgba(247,245,255,.16);
  --glass:rgba(27,24,52,.8);
  --glass-solid:#1b1834;
  --caution:#080716;
  --caution-copy:#f7f5ff;
  --metric-love:#b7a6ff;
  --metric-intuition:#ff83bd;
  --metric-focus:#54e4df;
  --shadow:0 28px 86px rgba(0,0,0,.46);
  --active-control-surface:#FFFFFF;
  --active-control-ink:#111022;
}

* { box-sizing:border-box; }
html { background:#0d0c16; }
body {
  min-width:0;
  min-height:100vh;
  min-height:100dvh;
  margin:0;
  overflow-x:hidden;
  color:var(--ink);
  background:radial-gradient(circle at 50% 8%, #29253d 0, #15141e 44%, #0d0c16 100%);
  font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-rendering:optimizeLegibility;
}

button, input, select, [role="button"] { min-height:48px; font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.48; }
h1, h2, h3, p, label, button, input { overflow-wrap:anywhere; }
h1 {
  max-width:12ch;
  margin:0;
  font-size:clamp(2.2rem, 10vw, 3.65rem);
  font-weight:900;
  letter-spacing:-.065em;
  line-height:.94;
}
h2 { margin:0; font-size:clamp(1.25rem, 5vw, 1.65rem); letter-spacing:-.04em; line-height:1.05; }
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.app-surface :focus-visible { outline-color:var(--zodiac-focus); }
[inert] { pointer-events:none; user-select:none; }

.prototype-stage { display:grid; min-height:100vh; min-height:100dvh; place-items:center; padding:24px; }
.device-shell {
  width:min(100%, 430px);
  min-height:min(900px, calc(100dvh - 48px));
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  border-radius:clamp(24px, 4vw, 40px);
  background:var(--paper);
  box-shadow:var(--shadow);
}
.app-surface {
  position:relative;
  isolation:isolate;
  min-height:inherit;
  color:var(--ink);
  --sign-primary:#62b77b;
  --sign-secondary:#d7b956;
  --sign-soft:#eaf3df;
  --sign-wash:var(--sign-soft);
  --sign-control-ink:var(--sign-foreground, #44755D);
  --zodiac-focus:var(--sign-control-ink);
  --sign-glow:color-mix(in srgb, var(--sign-primary) 36%, transparent);
  --sign-wave-start:color-mix(in srgb, var(--violet) 72%, var(--sign-primary));
  --sign-wave-end:color-mix(in srgb, var(--cyan) 68%, var(--sign-secondary));
  --active-control-surface:var(--sign-soft);
  --active-control-ink:var(--sign-control-ink);
  background:
    radial-gradient(ellipse at 82% 4%, color-mix(in srgb, var(--sign-wash) 92%, transparent) 0, transparent 35%),
    radial-gradient(ellipse at 8% 36%, color-mix(in srgb, var(--sign-primary) 10%, transparent) 0, transparent 42%),
    linear-gradient(165deg, var(--paper) 0 67%, color-mix(in srgb, var(--lilac) 72%, var(--paper)) 100%);
}

.app-surface[data-zodiac="aries"] { --sign-primary:#F06449; --sign-secondary:#FFB45E; --sign-soft:#FFE2D2; --sign-foreground:#A7463F; }
.app-surface[data-zodiac="taurus"] { --sign-primary:#5B9362; --sign-secondary:#C49A55; --sign-soft:#E3EBD9; --sign-foreground:#476D53; }
.app-surface[data-zodiac="gemini"] { --sign-primary:#E2A62B; --sign-secondary:#7C6CE5; --sign-soft:#FFF0BF; --sign-foreground:#87642D; }
.app-surface[data-zodiac="cancer"] { --sign-primary:#6F7FCF; --sign-secondary:#E899B4; --sign-soft:#E7EBFF; --sign-foreground:#555F9F; }
.app-surface[data-zodiac="leo"] { --sign-primary:#E6882A; --sign-secondary:#F2C94C; --sign-soft:#FFF0C2; --sign-foreground:#93592C; }
.app-surface[data-zodiac="virgo"] { --sign-primary:#62B77B; --sign-secondary:#D7B956; --sign-soft:#EAF3DF; --sign-foreground:#44755D; }
.app-surface[data-zodiac="libra"] { --sign-primary:#A976C7; --sign-secondary:#62AFC4; --sign-soft:#F0E5F6; --sign-foreground:#7D5899; }
.app-surface[data-zodiac="scorpio"] { --sign-primary:#9D405C; --sign-secondary:#6E52B5; --sign-soft:#F4DEE6; --sign-foreground:#75334F; }
.app-surface[data-zodiac="sagittarius"] { --sign-primary:#6B4EB3; --sign-secondary:#E97954; --sign-soft:#E9E1F7; --sign-foreground:#523C8B; }
.app-surface[data-zodiac="capricorn"] { --sign-primary:#55706E; --sign-secondary:#B58A62; --sign-soft:#E1E8E4; --sign-foreground:#42545B; }
.app-surface[data-zodiac="aquarius"] { --sign-primary:#2D9FB5; --sign-secondary:#7967D7; --sign-soft:#DDF2F5; --sign-foreground:#26758D; }
.app-surface[data-zodiac="pisces"] { --sign-primary:#5D73D3; --sign-secondary:#D95B9D; --sign-soft:#E3E8FA; --sign-foreground:#4856A2; }

.app-surface[data-theme="dark"][data-zodiac="aries"] { --sign-primary:#FF8068; --sign-secondary:#FFC36F; --sign-foreground:#FF8068; }
.app-surface[data-theme="dark"][data-zodiac="taurus"] { --sign-primary:#83C58A; --sign-secondary:#E1B66A; --sign-foreground:#83C58A; }
.app-surface[data-theme="dark"][data-zodiac="gemini"] { --sign-primary:#FFD05A; --sign-secondary:#A79AFF; --sign-foreground:#FFD05A; }
.app-surface[data-theme="dark"][data-zodiac="cancer"] { --sign-primary:#9EABFF; --sign-secondary:#FFB3CD; --sign-foreground:#9EABFF; }
.app-surface[data-theme="dark"][data-zodiac="leo"] { --sign-primary:#FFAA4D; --sign-secondary:#FFE072; --sign-foreground:#FFAA4D; }
.app-surface[data-theme="dark"][data-zodiac="virgo"] { --sign-primary:#7FD59A; --sign-secondary:#ECCE6D; --sign-foreground:#7FD59A; }
.app-surface[data-theme="dark"][data-zodiac="libra"] { --sign-primary:#CEA0E9; --sign-secondary:#85D1E2; --sign-foreground:#CEA0E9; }
.app-surface[data-theme="dark"][data-zodiac="scorpio"] { --sign-primary:#E06C91; --sign-secondary:#A88AEF; --sign-foreground:#E06C91; }
.app-surface[data-theme="dark"][data-zodiac="sagittarius"] { --sign-primary:#A385EA; --sign-secondary:#FF9874; --sign-foreground:#A385EA; }
.app-surface[data-theme="dark"][data-zodiac="capricorn"] { --sign-primary:#82AAA5; --sign-secondary:#D5AA80; --sign-foreground:#82AAA5; }
.app-surface[data-theme="dark"][data-zodiac="aquarius"] { --sign-primary:#50C7DC; --sign-secondary:#A594FF; --sign-foreground:#50C7DC; }
.app-surface[data-theme="dark"][data-zodiac="pisces"] { --sign-primary:#8CA0FF; --sign-secondary:#FF83BF; --sign-foreground:#8CA0FF; }
.app-surface[data-theme="dark"] {
  --sign-wash:color-mix(in srgb, var(--sign-primary) 14%, var(--paper));
  --active-control-surface:#FFFFFF;
  --active-control-ink:#111022;
}
.app-background { min-height:inherit; }

.onboarding, .placeholder {
  display:flex;
  min-height:inherit;
  flex-direction:column;
  padding:clamp(24px, 7vw, 34px) clamp(18px, 6vw, 28px) max(28px, env(safe-area-inset-bottom));
}
.onboarding-header { margin-bottom:clamp(30px, 9vh, 72px); }
.onboarding-header-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:10px; }
.onboarding-header-row .eyebrow { margin:0; }
.eyebrow {
  margin:0 0 10px;
  color:var(--violet);
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.15em;
  line-height:1.35;
  text-transform:uppercase;
}
.progress { display:flex; gap:7px; padding:0; margin:0; list-style:none; }
.progress li { height:4px; flex:1; border-radius:4px; background:var(--line); }
.progress li[aria-current] { background:var(--violet); }
.onboarding-copy > p:last-child { max-width:33ch; margin:20px 0 26px; color:var(--muted); line-height:1.58; }
.form-card {
  display:grid;
  gap:8px;
  min-width:0;
  padding:clamp(16px, 5vw, 22px);
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--glass);
  box-shadow:0 14px 40px rgba(43,32,100,.07);
  backdrop-filter:blur(16px);
}
label, .field-label { font-size:.9rem; font-weight:750; }
input {
  width:100%;
  min-width:0;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  color:var(--ink);
  background:var(--paper);
}
.field-error { min-height:1.25em; margin:0 0 6px; color:var(--error); font-size:.82rem; }
.selectbox, .place-option {
  display:flex;
  width:100%;
  min-width:0;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  color:var(--ink);
  background:var(--paper);
  text-align:left;
}
.onboarding-actions { display:flex; gap:10px; margin-top:auto; padding-top:26px; }
.primary-button, .secondary-button { min-width:0; flex:1; border-radius:12px; padding:10px 12px; font-weight:850; }
.primary-button { border:1px solid var(--button); color:white; background:var(--button); }
.secondary-button { border:1px solid var(--line); color:var(--ink); background:transparent; }
.zodiac-preview { display:flex; align-items:center; gap:12px; margin-top:8px; padding:10px; border-radius:14px; background:var(--mist); }
.zodiac-preview svg { width:78px; height:70px; flex:0 0 auto; }
.zodiac-preview p { margin:0; }
fieldset { min-width:0; padding:0; border:0; }
.time-kind, .tolerance { display:grid; gap:8px; }
.tolerance { margin-top:8px; }
.tolerance legend { margin:8px 0; font-weight:750; }
.choice, .gender-option {
  display:flex;
  min-width:0;
  min-height:48px;
  align-items:center;
  gap:10px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper);
}
.choice:has(input:checked), .gender-option:has(input:checked) { border-color:var(--sign-primary); background:color-mix(in srgb, var(--sign-wash) 58%, var(--paper)); }
.choice input, .gender-option input { width:auto; min-height:auto; flex:0 0 auto; accent-color:var(--violet); }
.hint, .selected-place { margin:4px 0; color:var(--muted); font-size:.9rem; line-height:1.48; }
.place-list { display:grid; gap:8px; padding:0; margin:6px 0; list-style:none; }
.place-option { display:grid; justify-items:start; }
.place-option span { color:var(--muted); font-size:.75rem; line-height:1.35; }

.dialog-layer {
  position:fixed;
  z-index:8;
  top:24px;
  bottom:24px;
  left:50%;
  display:grid;
  width:min(430px, calc(100% - 48px));
  transform:translateX(-50%);
  place-items:end center;
  padding:18px;
  overscroll-behavior:contain;
}
.dialog-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:0; background:rgba(7,5,20,.68); }
.gender-dialog {
  position:relative;
  z-index:1;
  display:grid;
  width:100%;
  max-height:min(78vh, 620px);
  gap:12px;
  overflow-y:auto;
  padding:clamp(18px, 6vw, 26px);
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--paper);
  box-shadow:var(--shadow);
  overscroll-behavior:contain;
}
.gender-dialog [role="radiogroup"] { display:grid; gap:8px; }
.dialog-close { border:0; color:var(--violet); background:transparent; font-weight:850; }
.placeholder { justify-content:center; }
.skip-link, .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link:focus { z-index:10; width:auto; height:auto; clip:auto; padding:10px; color:#071b1b; background:var(--cyan); }

.app-page {
  min-width:0;
  min-height:inherit;
  padding:clamp(22px, 6vw, 30px) clamp(16px, 5.5vw, 28px) 0;
  padding-bottom:calc(112px + env(safe-area-inset-bottom));
}
.app-page > *, .energy-card > *, .detail-hero > *, .confidence > *, .theme-control > * { min-width:0; }
.app-header { position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between; margin-bottom:clamp(34px, 8vw, 52px); }
.brand { margin:0; color:var(--ink); font-size:.8rem; font-weight:900; letter-spacing:.24em; }
.header-actions { display:flex; align-items:center; gap:10px; }
.icon-button { display:grid; width:48px; height:48px; place-items:center; border-radius:50%; }
.icon-button { min-height:48px; border:1px solid var(--line); color:var(--ink); background:var(--glass); }
.icon-button svg { width:19px; height:19px; }
.avatar {
  display:grid;
  width:48px;
  height:48px;
  padding:0;
  appearance:none;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--sign-primary);
  color:var(--active-control-ink);
  background:var(--active-control-surface);
  box-shadow:0 0 18px var(--sign-glow);
  font-size:.82rem;
  font-weight:900;
  transition:box-shadow 120ms ease, border-color 120ms ease;
}
.avatar:hover { border-color:var(--active-control-ink); }
.avatar:active { box-shadow:0 0 10px var(--sign-glow); }

.zodiac-hero { position:relative; min-height:clamp(175px, 48vw, 220px); padding:0 0 12px; }
.zodiac-hero .eyebrow { position:relative; z-index:2; max-width:28ch; color:var(--violet); }
.zodiac-hero h1 { position:relative; z-index:2; display:grid; max-width:100%; gap:0; font-size:2.25rem; }
.zodiac-hero h1 span { white-space:normal; }
.zodiac-hero h1 span:last-child { color:var(--ink); }
.hero-art {
  position:absolute;
  z-index:0;
  right:clamp(-80px, -13vw, -46px);
  bottom:clamp(-118px, -26vw, -82px);
  width:min(82vw, 350px);
  opacity:.3;
  pointer-events:none;
  animation:artwork-float 9s ease-in-out infinite alternate;
}
.hero-art svg { display:block; width:100%; filter:drop-shadow(0 18px 22px color-mix(in srgb, var(--sign-primary) 18%, transparent)); }
.zodiac-geometry .art-primary { stroke:var(--sign-primary); }
.zodiac-geometry .art-secondary { stroke:var(--sign-secondary); }
.zodiac-geometry .art-fill { fill:var(--sign-secondary); stroke:none; }
.zodiac-geometry .virgo-stems { stroke-width:5.5; }
.constellation { stroke:var(--sign-secondary); fill:var(--sign-secondary); animation:constellation-pulse 6s ease-in-out infinite alternate; }
.constellation polyline { fill:none; opacity:.44; stroke-width:1.5; }
.constellation circle { stroke:none; }

.energy-card {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  justify-items:center;
  gap:clamp(18px, 5vw, 26px);
  padding:clamp(22px, 7vw, 32px);
  border:1px solid rgba(255,255,255,.78);
  border-radius:clamp(24px, 8vw, 34px);
  background:color-mix(in srgb, var(--glass) 78%, var(--sign-wash));
  box-shadow:0 24px 48px color-mix(in srgb, var(--sign-primary) 13%, rgba(23,19,47,.1));
  backdrop-filter:blur(26px);
  text-align:center;
}
.energy-card > div:first-child { display:grid; width:100%; place-items:center; }
.energy-card h2 { font-size:clamp(1.8rem, 8vw, 2.5rem); font-weight:900; }
.energy-card p:last-child { max-width:31ch; margin:12px auto 0; color:var(--muted); font-size:.95rem; line-height:1.55; }
.energy-meter {
  position:relative;
  display:grid;
  width:min(100%, clamp(216px, 66vw, 270px));
  aspect-ratio:1 / 1;
  place-items:center;
}
.energy-meter svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.energy-value {
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-end;
  gap:4px;
  color:white;
  font-weight:900;
  text-shadow:0 3px 18px rgba(23,19,47,.22);
}
.energy-number { font-size:clamp(4.25rem, 19vw, 5.8rem); letter-spacing:-.085em; line-height:.8; }
.energy-unit { margin-bottom:.28rem; font-size:clamp(1.5rem, 7vw, 2.15rem); letter-spacing:-.04em; line-height:.85; }
.energy-track { fill:color-mix(in srgb, var(--lilac) 82%, var(--paper)); stroke:color-mix(in srgb, var(--sign-primary) 24%, transparent); stroke-width:2; }
.energy-wave {
  fill:var(--sign-wave-start);
  opacity:.9;
  transform-box:fill-box;
  transform-origin:center;
  animation:wave-drift 5.8s ease-in-out infinite alternate;
}
.energy-wave-secondary {
  fill:var(--sign-wave-end);
  opacity:.7;
  animation-direction:reverse;
  animation-duration:7.2s;
}

.metric-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin-top:18px; }
.metric {
  display:grid;
  min-width:0;
  min-height:122px;
  align-content:center;
  gap:7px;
  padding:clamp(10px, 3.5vw, 16px);
  border:1px solid var(--line);
  border-radius:18px;
  background:color-mix(in srgb, var(--glass) 84%, var(--sign-wash));
  box-shadow:0 10px 24px rgba(23,19,47,.05);
  backdrop-filter:blur(16px);
}
.metric span, .timing-grid span { color:var(--muted); font-size:.68rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.metric strong { color:var(--metric-love); font-size:clamp(1.55rem, 8vw, 2.25rem); letter-spacing:-.055em; line-height:1; }
.metric:nth-child(2) strong { color:var(--metric-intuition); }
.metric:nth-child(3) strong { color:var(--metric-focus); }
.metric div { height:3px; overflow:hidden; border-radius:3px; background:color-mix(in srgb, currentColor 12%, transparent); }
.metric i { display:block; height:100%; border-radius:inherit; background:currentColor; }
.caution-card {
  margin-top:18px;
  padding:clamp(18px, 5vw, 24px);
  border:0;
  border-radius:20px;
  color:var(--caution-copy);
  background:color-mix(in srgb, var(--caution) 92%, transparent);
  backdrop-filter:blur(14px);
  font-size:.92rem;
  font-weight:650;
  line-height:1.52;
}
.caution-card strong { color:var(--cyan); }
.prototype-disclosure { margin:14px 2px 0; color:var(--muted); font-size:.78rem; line-height:1.45; }

.details-page { position:relative; }
.detail-hero {
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(92px, 116px);
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.detail-hero h1 { max-width:11ch; font-size:clamp(1.9rem, 8.6vw, 3rem); line-height:.98; letter-spacing:-.052em; }
.detail-hero > svg { width:min(100%, 116px); opacity:.82; }

.detail-art { display:block; width:44px; height:44px; flex:0 0 auto; overflow:visible; }
.detail-art-primary { fill:none; stroke:var(--sign-primary); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.detail-art-secondary { fill:none; stroke:var(--sign-secondary); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.detail-art-fill { fill:color-mix(in srgb, var(--sign-secondary) 52%, transparent); }
.detail-art-star { fill:var(--sign-primary); }

.sky-trio {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:0;
  padding:12px 8px;
  border:1px solid color-mix(in srgb, var(--sign-primary) 16%, var(--line));
  border-radius:20px;
  background:color-mix(in srgb, var(--glass) 88%, var(--sign-wash));
  box-shadow:0 14px 34px color-mix(in srgb, var(--sign-primary) 9%, transparent);
  backdrop-filter:blur(16px);
}
.sky-trio-item { display:flex; min-width:0; padding:2px 8px; align-items:center; flex-direction:column; text-align:center; }
.sky-trio-item + .sky-trio-item { border-left:1px solid var(--line); }
.sky-trio-item .detail-art { width:34px; height:34px; margin-bottom:5px; }
.sky-trio-item span { color:var(--muted); font-size:.65rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.sky-trio-item strong { margin-top:3px; color:var(--ink); font-size:.84rem; line-height:1.2; }
.sky-trio-item small { margin-top:3px; color:var(--muted); font-size:.65rem; line-height:1.3; }

.confidence, .time-callout, .complete-profile-prompt {
  margin:12px 0 20px;
  padding:clamp(13px, 4vw, 17px);
  border:1px solid color-mix(in srgb, var(--sign-primary) 23%, var(--line));
  border-radius:18px;
  background:color-mix(in srgb, var(--glass) 88%, var(--sign-wash));
}
.confidence { display:grid; gap:8px; }
.confidence div { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; }
.confidence strong { color:var(--sign-foreground); }
.confidence span { font-weight:850; }
.confidence p, .time-callout p, .complete-profile-prompt p { margin:0; color:var(--muted); font-size:.76rem; line-height:1.5; }
.time-callout h2 { font-size:1.1rem; }

.cosmic-status {
  position:relative;
  min-width:0;
  margin-top:20px;
  padding:18px;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--sign-primary) 16%, var(--line));
  border-radius:22px;
  background:color-mix(in srgb, var(--glass) 88%, var(--sign-wash));
  box-shadow:0 14px 34px color-mix(in srgb, var(--sign-primary) 9%, transparent);
  backdrop-filter:blur(16px);
}
.cosmic-status > .detail-art { position:absolute; top:10px; right:8px; width:92px; height:92px; opacity:.2; }
.cosmic-status > .eyebrow, .cosmic-status > h2, .cosmic-status > p, .cosmic-status > button { position:relative; z-index:1; }
.cosmic-status > h2 { max-width:16ch; margin:12px 0 8px; font-size:1.24rem; line-height:1.08; letter-spacing:-.028em; }
.cosmic-status > p:not(.eyebrow) { max-width:36ch; margin:0; color:var(--muted); font-size:.84rem; line-height:1.55; }
.cosmic-chips { display:flex; position:relative; z-index:1; flex-wrap:wrap; gap:6px; margin-top:10px; }
.cosmic-chip { padding:5px 8px; border:1px solid var(--line); border-radius:999px; color:var(--ink); background:var(--glass-solid); font-size:.66rem; font-weight:800; }
.cosmic-toggle {
  width:100%;
  min-height:48px;
  margin-top:14px;
  border:1px solid color-mix(in srgb, var(--sign-primary) 25%, var(--line));
  border-radius:13px;
  color:var(--ink);
  background:color-mix(in srgb, var(--glass-solid) 88%, var(--sign-wash));
  font-size:.78rem;
  font-weight:850;
}
.cosmic-toggle[aria-expanded="true"] { border-color:var(--sign-foreground); box-shadow:inset 0 -3px 0 var(--sign-foreground); }
.cosmic-body-details { display:grid; position:relative; z-index:1; gap:10px; margin-top:10px; }
.cosmic-body-details[hidden] { display:none; }
.cosmic-body-details article { display:grid; grid-template-columns:40px minmax(0, 1fr); gap:10px; padding-top:11px; border-top:1px solid var(--line); }
.cosmic-body-details .detail-art { width:38px; height:38px; }
.cosmic-body-details h3 { margin:0 0 3px; color:var(--sign-foreground); font-size:.77rem; }
.cosmic-body-details strong { font-size:.83rem; }
.cosmic-body-details p { margin:5px 0 0; color:var(--muted); font-size:.78rem; line-height:1.5; }

.day-rhythm {
  margin-top:12px;
  padding:14px;
  border:1px solid color-mix(in srgb, var(--sign-primary) 16%, var(--line));
  border-radius:22px;
  background:color-mix(in srgb, var(--glass) 88%, var(--sign-wash));
  box-shadow:0 14px 34px color-mix(in srgb, var(--sign-primary) 9%, transparent);
  backdrop-filter:blur(16px);
}
.section-heading { display:flex; min-width:0; align-items:end; justify-content:space-between; gap:12px; margin:20px 2px 10px; }
.day-rhythm > .section-heading { margin:0 1px 11px; }
.section-heading h2 { margin:0; font-size:1.05rem; line-height:1.2; }
.section-heading span, .rhythm-time { color:var(--muted); font-size:.68rem; }
.rhythm-tabs { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:5px; padding:4px; border-radius:15px; background:color-mix(in srgb, var(--ink) 6%, transparent); }
.rhythm-tab {
  display:grid;
  min-width:0;
  min-height:48px;
  padding:6px 4px;
  border:1px solid transparent;
  border-radius:11px;
  color:var(--muted);
  background:transparent;
  place-content:center;
  text-align:center;
}
.rhythm-tab span { font-size:.67rem; font-weight:800; }
.rhythm-tab strong { margin-top:1px; font-size:.83rem; }
.rhythm-tab[aria-selected="true"] { color:var(--active-control-ink); border-color:var(--sign-primary); background:var(--active-control-surface); box-shadow:inset 0 -3px 0 var(--active-control-ink), 0 6px 14px var(--sign-glow); }
.rhythm-panel { display:grid; grid-template-columns:48px minmax(0, 1fr); gap:12px; min-width:0; padding:16px 2px 2px; }
.rhythm-panel[hidden] { display:none; }
.rhythm-panel .detail-art { width:48px; height:48px; }
.rhythm-panel h3 { margin:2px 0 6px; font-size:1rem; }
.rhythm-panel p:not(.rhythm-time) { margin:0; color:var(--muted); font-size:.84rem; line-height:1.55; }
.rhythm-time { margin:0; font-weight:800; letter-spacing:.05em; }
.rhythm-action { display:block; margin-top:10px; padding-top:9px; border-top:1px solid var(--line); color:var(--sign-foreground); font-size:.78rem; line-height:1.4; }

.life-area-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.life-area-card {
  min-width:0;
  padding:14px;
  border:1px solid color-mix(in srgb, var(--sign-primary) 16%, var(--line));
  border-radius:19px;
  background:color-mix(in srgb, var(--glass) 88%, var(--sign-wash));
  box-shadow:0 14px 34px color-mix(in srgb, var(--sign-primary) 9%, transparent);
  backdrop-filter:blur(16px);
}
.life-area-card .detail-art { width:42px; height:42px; margin-bottom:9px; }
.life-area-card h3 { margin:0 0 6px; font-size:.9rem; line-height:1.15; }
.life-area-card p { margin:0; color:var(--muted); font-size:.79rem; line-height:1.48; }

.timing-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin-top:20px; }
.timing-grid article {
  display:grid;
  grid-template-columns:40px minmax(0, 1fr);
  min-width:0;
  gap:9px;
  padding:13px;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--sign-primary) 16%, var(--line));
  border-radius:16px;
  background:color-mix(in srgb, var(--glass) 88%, var(--sign-wash));
  box-shadow:0 14px 34px color-mix(in srgb, var(--sign-primary) 9%, transparent);
  backdrop-filter:blur(16px);
}
.timing-grid .detail-art { width:38px; height:38px; }
.timing-grid strong { display:block; margin-top:4px; color:var(--ink); font-size:.86rem; }
.timing-grid p { margin:5px 0 0; color:var(--muted); font-size:.74rem; line-height:1.45; }
.details-page .prototype-disclosure { margin-top:20px; }

.discover-intro p:last-child { max-width:31ch; color:var(--muted); line-height:1.5; }
.tarot-deck {
  --tarot-step:calc(100% + 10px);
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  isolation:isolate;
  margin:28px 0 16px;
}
.tarot-card {
  --tarot-x:0px;
  --tarot-y:8px;
  --tarot-rotate:-2deg;
  position:relative;
  min-width:0;
  min-height:152px;
  padding:7px;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--sign-primary) 45%, var(--line));
  border-radius:14px;
  color:var(--sign-control-ink);
  background:color-mix(in srgb, var(--sign-wash) 72%, var(--paper));
  box-shadow:inset 0 0 0 3px var(--paper), 0 10px 24px var(--sign-glow);
  transform-origin:center;
  will-change:transform;
}
.tarot-card:nth-child(1) { --tarot-x:var(--tarot-step); --tarot-rotate:6deg; z-index:1; }
.tarot-card:nth-child(2) { --tarot-y:-5px; z-index:3; }
.tarot-card:nth-child(3) { --tarot-x:calc(var(--tarot-step) * -1); --tarot-rotate:-6deg; z-index:2; }
.tarot-deck.is-gathering .tarot-card { pointer-events:none; animation:tarot-gather 260ms cubic-bezier(.55,.055,.675,.19) both; }
.tarot-deck.is-spreading .tarot-card { pointer-events:none; animation:tarot-spread 360ms cubic-bezier(.175,.885,.32,1.275) both; }
.tarot-deck.is-spreading .tarot-card:nth-child(2) { animation-delay:55ms; }
.tarot-deck.is-spreading .tarot-card:nth-child(3) { animation-delay:110ms; }
@keyframes tarot-gather {
  from { transform:translate3d(0, 0, 0) rotate(0deg) scale(1); }
  to { transform:translate3d(var(--tarot-x), var(--tarot-y), 0) rotate(var(--tarot-rotate)) scale(.92); }
}
@keyframes tarot-spread {
  from { transform:translate3d(var(--tarot-x), var(--tarot-y), 0) rotate(var(--tarot-rotate)) scale(.92); }
  to { transform:translate3d(0, 0, 0) rotate(0deg) scale(1); }
}
.tarot-card-visual { display:grid; width:100%; height:100%; min-height:136px; place-items:center; }
.tarot-art { display:block; width:100%; height:100%; max-height:154px; }
.tarot-frame { fill:color-mix(in srgb, var(--paper) 82%, var(--sign-soft)); stroke:var(--sign-primary); stroke-width:2; }
.tarot-primary, .tarot-secondary, .tarot-orbit, .tarot-back-seal { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.tarot-primary, .tarot-back-seal { stroke:var(--sign-primary); stroke-width:3; }
.tarot-secondary, .tarot-orbit { stroke:var(--sign-secondary); stroke-width:2; }
.tarot-orbit { opacity:.72; }
.tarot-fill { fill:var(--sign-secondary); }
.tarot-card-title { align-self:end; margin-top:-30px; padding:4px 7px; border-radius:999px; color:var(--active-control-ink); background:var(--active-control-surface); font-size:.72rem; font-weight:850; line-height:1; }
.tarot-card.is-flipped { background:var(--glass-solid); box-shadow:inset 0 0 0 3px var(--sign-secondary), 0 12px 28px var(--sign-glow); }
.tarot-reading { padding:18px; border-radius:18px; background:var(--glass); box-shadow:0 14px 32px color-mix(in srgb, var(--sign-primary) 13%, transparent); }
.tarot-reading h2 { color:var(--sign-foreground); }
.tarot-reading p:last-child { margin-bottom:0; color:var(--muted); line-height:1.55; }
.tarot-shuffle { width:100%; margin-top:14px; }
.tarot-shuffle:disabled { cursor:wait; opacity:.72; }
.future-experiences { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin-top:26px; }
.future-experiences h2 { grid-column:1 / -1; font-size:1rem; }
.future-experiences button { min-width:0; min-height:48px; border:1px dashed var(--line); border-radius:10px; color:var(--muted); background:transparent; font-size:.78rem; }

.profile-page .app-header { margin-bottom:18px; }
.profile-hero {
  position:relative;
  min-height:190px;
  margin-bottom:12px;
  padding:20px;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--sign-primary) 16%, var(--line));
  border-radius:28px;
  background:color-mix(in srgb, var(--glass) 88%, var(--sign-wash));
  box-shadow:0 14px 34px color-mix(in srgb, var(--sign-primary) 9%, transparent);
  backdrop-filter:blur(16px);
}
.profile-hero-copy { position:relative; z-index:2; }
.profile-hero .eyebrow { max-width:26ch; color:var(--sign-foreground); }
.profile-hero h1 { max-width:9ch; font-size:clamp(2.2rem, 10vw, 3.35rem); line-height:.94; letter-spacing:-.055em; }
.profile-hero-copy > p:last-child { max-width:29ch; margin:15px 0 0; color:var(--muted); font-size:.85rem; line-height:1.5; }
.profile-hero-art {
  position:absolute;
  right:-44px;
  bottom:-68px;
  z-index:0;
  width:min(66vw, 260px);
  opacity:.3;
  pointer-events:none;
  animation:artwork-float 9s ease-in-out infinite alternate;
}
.profile-hero-art svg { display:block; width:100%; filter:drop-shadow(0 18px 22px color-mix(in srgb, var(--sign-primary) 18%, transparent)); }
.profile-identity-card {
  display:grid;
  grid-template-columns:54px minmax(0, 1fr);
  align-items:center;
  gap:13px;
  padding:15px;
  border:1px solid color-mix(in srgb, var(--sign-primary) 16%, var(--line));
  border-radius:20px;
  background:color-mix(in srgb, var(--glass) 88%, var(--sign-wash));
  box-shadow:0 14px 34px color-mix(in srgb, var(--sign-primary) 9%, transparent);
  backdrop-filter:blur(16px);
}
.profile-identity-card .detail-art { width:54px; height:54px; }
.profile-identity-card .eyebrow { margin-bottom:3px; color:var(--sign-foreground); font-size:.64rem; }
.profile-identity-card h2 { font-size:1.22rem; }
.profile-identity-card p:last-child { margin:5px 0 0; color:var(--muted); font-size:.76rem; line-height:1.35; }
.profile-sky {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:0;
  margin-top:12px;
  padding:12px 6px;
  border:1px solid color-mix(in srgb, var(--sign-primary) 16%, var(--line));
  border-radius:20px;
  background:color-mix(in srgb, var(--glass) 88%, var(--sign-wash));
  box-shadow:0 14px 34px color-mix(in srgb, var(--sign-primary) 9%, transparent);
  backdrop-filter:blur(16px);
}
.profile-sky-item { display:flex; min-width:0; padding:2px 7px; align-items:center; flex-direction:column; text-align:center; }
.profile-sky-item + .profile-sky-item { border-left:1px solid var(--line); }
.profile-sky-item .detail-art { width:36px; height:36px; margin-bottom:5px; }
.profile-sky-item span { color:var(--muted); font-size:.62rem; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
.profile-sky-item strong { margin-top:3px; color:var(--ink); font-size:.82rem; line-height:1.22; }
.profile-sky-item small { margin-top:3px; color:var(--muted); font-size:.61rem; line-height:1.28; }
.profile-facts {
  display:grid;
  margin-top:12px;
  padding:5px 15px;
  border:1px solid color-mix(in srgb, var(--sign-primary) 16%, var(--line));
  border-radius:20px;
  background:color-mix(in srgb, var(--glass) 88%, var(--sign-wash));
  box-shadow:0 14px 34px color-mix(in srgb, var(--sign-primary) 9%, transparent);
  backdrop-filter:blur(16px);
}
.profile-page[data-profile-view="summary"] .profile-save-status:empty { display:none; }
.profile-fact-row { display:grid; min-width:0; grid-template-columns:36px minmax(0, 1fr); align-items:center; gap:0 11px; padding:7px 0; }
.profile-fact-row + .profile-fact-row { border-top:1px solid var(--line); }
.profile-fact-row .detail-art { width:36px; height:36px; grid-row:1 / 3; }
.profile-fact-row span { color:var(--muted); font-size:.66rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.profile-fact-row strong { margin-top:3px; font-size:.87rem; line-height:1.35; }
.profile-edit-button { width:100%; min-height:48px; margin-top:12px; }
.profile-edit-header { display:grid; grid-template-columns:48px minmax(0, 1fr); align-items:start; gap:13px; margin-bottom:14px; }
.profile-edit-header h1 { max-width:none; font-size:clamp(2rem, 9vw, 2.8rem); }
.profile-edit-header p:last-child { margin:7px 0 0; color:var(--muted); font-size:.82rem; }
.profile-edit-back { display:grid; min-width:48px; min-height:48px; place-items:center; padding:0; border:1px solid var(--line); border-radius:50%; color:var(--ink); background:var(--glass); font-size:1.3rem; }
.profile-save-status { min-height:1.4em; margin:-10px 0 14px; color:var(--muted); font-size:.84rem; line-height:1.4; }
.profile-save-status.is-error { color:var(--error); }
.profile-save-status.is-unsaved { color:var(--sign-foreground); }
.profile-edit-card {
  display:grid;
  gap:8px;
  min-width:0;
  padding:clamp(16px, 5vw, 21px);
  border:1px solid color-mix(in srgb, var(--sign-primary) 16%, var(--line));
  border-radius:22px;
  background:color-mix(in srgb, var(--glass) 88%, var(--sign-wash));
  box-shadow:0 14px 34px color-mix(in srgb, var(--sign-primary) 9%, transparent);
  backdrop-filter:blur(16px);
}
.form-section-label { margin:5px 0 2px; color:var(--sign-foreground); font-size:.66rem; font-weight:900; letter-spacing:.12em; }
.form-section-label:not(:first-child) { margin-top:15px; padding-top:15px; border-top:1px solid var(--line); }
.profile-edit-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.profile-edit-grid > div { display:grid; min-width:0; gap:8px; align-content:start; }
.profile-edit-card .profile-time { margin-top:6px; background:color-mix(in srgb, var(--paper) 66%, transparent); }
.profile-time-kinds { display:grid; gap:8px; }
.profile-edit-card .place-list { max-height:208px; overflow-y:auto; overscroll-behavior:contain; }
.profile-edit-actions { margin-top:12px; }
.profile-save-button { width:100%; min-height:48px; }
.profile-intro { margin-bottom:20px; }
.profile-form { display:grid; gap:8px; }
.profile-form input { margin-bottom:7px; }
.profile-time { display:grid; gap:8px; margin:14px 0 0; padding:15px; border:1px solid var(--line); border-radius:16px; background:var(--glass); }
.profile-time legend { font-weight:850; }
.theme-control { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; padding:14px; border:1px solid var(--line); border-radius:16px; background:transparent; }
.theme-control h2 { font-size:1.05rem; }
.theme-control p { margin:4px 0 0; color:var(--muted); font-size:.82rem; }
.theme-control button { min-height:48px; flex:0 0 auto; color:var(--ink); background:var(--glass); }
.zodiac-preview-panel { display:grid; gap:14px; margin-top:16px; padding:16px; border:1px solid color-mix(in srgb, var(--sign-primary) 24%, var(--line)); border-radius:20px; background:var(--glass); }
.zodiac-preview-panel > div:first-child { display:grid; grid-template-columns:80px minmax(0, 1fr); column-gap:12px; align-items:center; }
.zodiac-preview-panel svg { grid-row:span 3; width:80px; }
.zodiac-preview-panel h2 { color:var(--sign-foreground); font-size:1.2rem; }
.zodiac-preview-panel p { margin:0; color:var(--muted); font-size:.84rem; line-height:1.4; }
.zodiac-preview-panel .eyebrow { margin-bottom:3px; }
.zodiac-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(72px, 1fr)); gap:6px; }
.zodiac-grid button { min-width:48px; min-height:48px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--paper); }
.zodiac-grid button[aria-pressed="true"] { border-color:var(--sign-foreground); color:var(--on-sign); background:var(--sign-foreground); box-shadow:inset 0 0 0 2px var(--paper); }
.reset-button { width:100%; min-height:48px; margin-top:22px; border:0; color:var(--muted); background:transparent; font-size:.85rem; text-decoration:underline; }

.app-dock {
  position:fixed;
  z-index:6;
  bottom:max(12px, env(safe-area-inset-bottom));
  left:50%;
  display:grid;
  width:min(402px, calc(100% - 28px));
  grid-template-columns:repeat(4, 1fr);
  transform:translateX(-50%);
  overflow:visible;
  border:1px solid color-mix(in srgb, var(--sign-primary) 20%, var(--line));
  border-radius:18px;
  background:color-mix(in srgb, var(--paper) 84%, transparent);
  box-shadow:0 18px 42px rgba(10,8,28,.26);
  backdrop-filter:blur(20px);
}
.app-dock button {
  position:relative;
  display:grid;
  min-width:48px;
  min-height:64px;
  place-items:center;
  border:0;
  border-radius:0;
  color:var(--muted);
  background:transparent;
}
.app-dock button + button { border-left:1px solid var(--line); }
.app-dock button:first-child { border-radius:17px 0 0 17px; }
.app-dock button:last-child { border-radius:0 17px 17px 0; }
.app-dock button svg { width:29px; height:29px; }
.app-dock .menu-icon-accent-fill { fill:currentColor; stroke:none; }
.app-dock button[aria-current="page"] .menu-icon-accent-stroke { stroke:var(--sign-primary); }
.app-dock button[aria-current="page"] .menu-icon-accent-fill { fill:var(--sign-primary); }
.app-dock button:hover { background:color-mix(in srgb, var(--ink) 7%, transparent); }
.app-dock button:active { box-shadow:inset 0 0 0 3px color-mix(in srgb, var(--ink) 16%, transparent); }
.app-dock button[aria-current="page"] {
  border:1px solid var(--sign-primary);
  color:var(--active-control-ink);
  background:var(--active-control-surface);
  box-shadow:inset 0 -4px 0 var(--sign-primary), 0 0 18px var(--sign-glow);
}
.app-dock button::after {
  content:attr(data-tooltip);
  position:absolute;
  bottom:calc(100% + 9px);
  left:50%;
  z-index:2;
  width:max-content;
  max-width:150px;
  padding:7px 9px;
  transform:translateX(-50%);
  border:1px solid var(--line);
  border-radius:8px;
  opacity:0;
  visibility:hidden;
  color:var(--caution-copy);
  background:var(--caution);
  box-shadow:0 8px 20px rgba(8,7,22,.25);
  font-size:.72rem;
  font-weight:750;
  line-height:1.2;
  pointer-events:none;
  transition:opacity 120ms ease;
}
.app-dock button:hover::after, .app-dock button:focus-visible::after { opacity:1; visibility:visible; }
.app-dock button:first-child::after { left:4px; transform:none; }
.app-dock button:last-child::after { right:4px; left:auto; transform:none; }

@keyframes artwork-float {
  from { transform:translate3d(0, 0, 0) rotate(-7deg); }
  to { transform:translate3d(-5px, -9px, 0) rotate(-5deg); }
}
@keyframes constellation-pulse {
  from { opacity:.42; }
  to { opacity:.8; }
}
@keyframes wave-drift {
  from { transform:translateX(-10px); }
  to { transform:translateX(10px); }
}

@media (max-width: 520px) {
  .prototype-stage { padding:0; }
  .device-shell { width:100%; min-height:100dvh; border:0; border-radius:0; }
  .app-surface { min-height:100dvh; }
  .zodiac-hero h1 { font-size:clamp(2rem, 8.4vw, 2.25rem); }
  .app-dock { width:calc(100% - 20px); }
  .dialog-layer { inset:0; width:100%; transform:none; }
}

@media (max-width: 389px) {
  .zodiac-hero { min-height:clamp(220px, 66vw, 245px); }
  .hero-art { bottom:-76px; width:min(78vw, 290px); opacity:.24; }
}

@media (max-width: 360px) {
  .app-page { padding-inline:16px; }
  .metric-grid { gap:7px; }
  .metric { min-height:108px; padding:9px 7px; border-radius:14px; }
  .tarot-deck { --tarot-step:calc(100% + 7px); gap:7px; }
  .tarot-card { min-height:132px; padding:6px; }
  .theme-control { align-items:stretch; flex-direction:column; }
  .theme-control button { width:100%; }
  .profile-edit-grid { grid-template-columns:1fr; }
}

@media (max-width: 320px) {
  .profile-page { overflow-x:hidden; padding-inline:12px; }
  .profile-hero { padding:17px; }
  .profile-sky { padding-inline:2px; }
  .profile-sky-item { padding-inline:3px; }
  .profile-sky-item .detail-art { width:30px; height:30px; }
  .profile-sky-item strong { font-size:.75rem; }
  .profile-sky-item small { font-size:.57rem; }
}

@media (max-width: 280px) {
  .sky-trio { grid-template-columns:1fr; }
  .sky-trio-item + .sky-trio-item { padding-top:10px; border-top:1px solid var(--line); border-left:0; }
  .life-area-grid { grid-template-columns:1fr; }
  .rhythm-tabs { grid-template-columns:1fr; }
  .timing-grid { grid-template-columns:1fr; }
}

@media (max-width: 240px) {
  .app-dock { width:100%; border-right:0; border-left:0; border-radius:0; }
  .app-page { padding-inline:10px; }
  .metric-grid { gap:3px; }
  .metric { padding-inline:4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* Aura Flow v4 — approved permanent HTML reference */
.app-background { position:relative; z-index:1; }
.app-page {
  position:relative;
  z-index:2;
  min-width:0;
  min-height:inherit;
  padding:clamp(22px, 6vw, 30px) clamp(16px, 5.5vw, 28px) 0;
  padding-bottom:calc(112px + env(safe-area-inset-bottom));
}
.zodiac-atmosphere {
  position:absolute;
  z-index:0;
  inset:72px -86px auto auto;
  width:min(92%, 390px);
  opacity:.24;
  pointer-events:none;
}
.zodiac-atmosphere svg { display:block; width:100%; }
.app-header { margin-bottom:clamp(24px, 6vw, 36px); }
.zodiac-hero { min-height:clamp(150px, 40vw, 188px); }
.hero-art { opacity:.16; }

.energy-flow {
  position:relative;
  height:184px;
  margin:2px calc(-1 * clamp(16px, 5.5vw, 28px)) 8px;
  overflow:hidden;
}
.energy-flow-score { position:absolute; z-index:3; top:18px; left:clamp(16px, 5.5vw, 28px); }
.energy-flow-score strong { display:block; font-size:54px; font-weight:950; line-height:1; letter-spacing:-.07em; }
.energy-flow-score span { color:var(--muted); font-size:12px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.energy-flow-svg { position:absolute; bottom:0; left:-5%; width:110%; height:126px; }
.energy-wave { transform-origin:center; animation:wave-drift 5.2s ease-in-out infinite alternate; }
.energy-wave-back { fill:var(--violet); opacity:.9; }
.energy-wave-primary { fill:var(--sign-primary); opacity:.66; animation-delay:-1.7s; }
.energy-wave-front { fill:var(--cyan); opacity:.72; animation-delay:-3s; }

.metric-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0; margin:0 0 10px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.metric { min-height:0; padding:14px 8px; border:0; border-radius:0; background:none; box-shadow:none; text-align:center; }
.metric + .metric { border-left:1px solid var(--line); }
.metric strong { display:block; font-size:clamp(1.7rem, 8vw, 2.25rem); letter-spacing:-.06em; }
.metric span { color:var(--muted); font-size:.72rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }

.section-stream { position:relative; z-index:2; }
.aura-flow-section { display:grid; grid-template-columns:54px minmax(0, 1fr); gap:14px; padding:20px 0; border-top:1px solid var(--line); }
.aura-flow-section:first-child { border-top:0; }
.aura-flow-art { display:grid; width:54px; height:54px; place-items:center; border-radius:50%; color:var(--sign-primary); background:color-mix(in srgb, var(--sign-primary) 12%, transparent); }
.aura-flow-art .detail-art { width:38px; height:38px; }
.aura-flow-copy { min-width:0; }
.aura-flow-copy h3 { margin:1px 0 6px; color:var(--ink); font-size:1.02rem; line-height:1.22; }
.aura-flow-copy p { margin:0; color:var(--muted); font-size:.93rem; line-height:1.58; }
.aura-flow-copy p strong { color:var(--ink); }
.aura-flow-meta { display:block; margin-top:8px; color:var(--sign-foreground); font-size:.72rem; font-weight:850; letter-spacing:.06em; }

.orbit-actions { display:flex; flex-wrap:wrap; gap:17px; margin-top:15px; }
.orbit-action { display:grid; min-width:52px; min-height:0; justify-items:center; gap:7px; padding:0; border:0; color:var(--muted); background:none; font-size:11px; font-weight:800; }
.orbit-action-icon { display:grid; width:48px; height:48px; place-items:center; border-radius:50%; color:var(--sign-primary); background:color-mix(in srgb, var(--sign-primary) 12%, transparent); transition:transform .2s, background .2s; }
.orbit-action:not(:disabled):hover .orbit-action-icon { transform:translateY(-2px); background:color-mix(in srgb, var(--sign-primary) 19%, transparent); }
.orbit-action svg { width:25px; height:25px; }

.details-sky-flow { display:block; margin:0; padding:0; }
.confidence, .time-callout { border:0; border-radius:0; background:none; box-shadow:none; }
.cosmic-status, .day-rhythm, .life-area-grid, .timing-grid, .profile-facts { display:block; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; backdrop-filter:none; }
.cosmic-body-details { display:block; margin:0; padding:0; border:0; background:none; }
.cosmic-body-details > .aura-flow-section { border-top:1px solid var(--line); }
.cosmic-orbit-intro { display:grid; grid-template-columns:76px minmax(0, 1fr); gap:18px; align-items:start; margin:28px 0 2px; padding:18px 0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.cosmic-orbit-intro > .detail-art { width:76px; height:76px; }
.cosmic-orbit-intro > div { min-width:0; }
.cosmic-orbit-intro .eyebrow { margin:0 0 7px; }
.cosmic-orbit-intro h2 { margin:0 0 8px; color:var(--ink); font-size:1.2rem; line-height:1.18; letter-spacing:-.025em; }
.cosmic-orbit-intro p:last-child { margin:0; color:var(--muted); font-size:.93rem; line-height:1.58; }
.section-heading { margin:28px 0 0; padding-bottom:9px; border-bottom:1px solid var(--line); }
.section-heading h2 { font-size:1.25rem; }
.day-rhythm .section-stream, .life-area-grid, .timing-grid { display:block; }

.discover-intro p:last-child { max-width:34ch; font-size:.96rem; line-height:1.55; }
.tarot-intention { margin-top:8px; }
.tarot-deck { margin:18px 0 14px; }
.tarot-reading { margin:4px 0 0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
.future-experiences { margin-top:5px; padding:0; border:0; background:none; }

.profile-hero { min-height:160px; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; backdrop-filter:none; }
.profile-hero-art { display:none; }
.profile-hero-copy > p:last-child { font-size:.93rem; }
.profile-sky { margin:0 0 6px; padding:12px 0; border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0; background:none; box-shadow:none; backdrop-filter:none; }
.profile-edit-card { display:grid; gap:10px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; backdrop-filter:none; }
.profile-edit-grid { grid-template-columns:1fr; gap:10px; }
.profile-edit-card .profile-time { background:color-mix(in srgb, var(--sign-primary) 6%, transparent); }
.central-orbit { display:grid; justify-items:center; margin:31px 0 17px; }
.save-orbit { position:relative; display:grid; width:78px; height:78px; min-height:78px; place-items:center; padding:0; border:0; border-radius:50%; color:#fff; background:var(--sign-primary); box-shadow:0 14px 34px color-mix(in srgb, var(--sign-primary) 35%, transparent); }
.save-orbit::after { content:""; position:absolute; inset:-8px; border:1px solid color-mix(in srgb, var(--sign-primary) 42%, transparent); border-radius:50%; }
.save-orbit svg { width:31px; height:31px; }
.central-orbit b { margin-top:14px; font-size:15px; }

.app-dock {
  position:fixed;
  z-index:6;
  bottom:max(12px, env(safe-area-inset-bottom));
  left:50%;
  display:grid;
  width:min(402px, calc(100% - 20px));
  height:64px;
  grid-template-columns:repeat(4, 1fr);
  overflow:visible;
  border:1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius:24px;
  background:color-mix(in srgb, var(--glass-solid) 75%, transparent);
  box-shadow:0 13px 34px rgba(9, 7, 28, .17);
  backdrop-filter:blur(24px) saturate(145%);
  transform:translateX(-50%);
}
.app-dock .app-dock-button { position:relative; display:grid; min-width:48px; min-height:64px; place-items:center; padding:0; border:0; border-radius:0; color:var(--muted); background:none; box-shadow:none; }
.app-dock .app-dock-button + .app-dock-button { border-left:0; }
.app-dock .app-dock-button:first-child, .app-dock .app-dock-button:last-child { border-radius:0; }
.app-dock .app-dock-button::before { content:""; position:absolute; z-index:-1; width:45px; height:45px; border-radius:50%; background:transparent; transition:background .2s, transform .2s; }
.app-dock .app-dock-button.is-active::before { background:color-mix(in srgb, var(--sign-primary) 14%, transparent); }
.app-dock .app-dock-button.is-active { color:var(--sign-primary); background:none; border:0; box-shadow:none; }
.app-dock .app-dock-button:hover { background:none; }
.app-dock .app-dock-button svg { position:relative; z-index:1; width:31px; height:31px; }
.app-dock .app-dock-button.is-active .menu-icon-accent-stroke { stroke:var(--sign-primary); }
.app-dock .app-dock-button.is-active .menu-icon-accent-fill { fill:var(--sign-primary); }

[data-theme="dark"] .app-dock { background:rgba(22, 19, 43, .76); border-color:rgba(255,255,255,.13); }
[data-theme="dark"] .aura-flow-art, [data-theme="dark"] .orbit-action-icon { background:color-mix(in srgb, var(--sign-primary) 16%, transparent); }

@media (max-width: 320px) {
  .app-page { padding-inline:12px; }
  .zodiac-hero h1 { font-size:1.95rem; }
  .aura-flow-section { grid-template-columns:46px minmax(0, 1fr); gap:11px; }
  .aura-flow-art { width:46px; height:46px; }
  .orbit-actions { gap:12px; }
  .app-dock { width:calc(100% - 12px); }
}