:root {
  color-scheme: dark;
  --ink: #f7f1ea;
  --ink-soft: #d4ccd7;
  --ink-dim: #a49dad;
  --void: #100c18;
  --night: #171220;
  --night-2: #21192d;
  --glass: rgba(31, 24, 45, 0.82);
  --glass-bright: rgba(43, 33, 58, 0.88);
  --line: rgba(245, 239, 255, 0.12);
  --line-strong: rgba(245, 239, 255, 0.22);
  --coral: #ff987c;
  --apricot: #ffc78f;
  --lilac: #b7a7e8;
  --cyan: #79d8d3;
  --mint: #91d5ab;
  --rose: #d98aaa;
  --danger: #ff6f86;
  --shadow: 0 24px 64px rgba(4, 2, 15, 0.38);
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 22px;
  --radius-xl: 36px;
  --rail: 94px;
  --dock: 380px;
  --display: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", Georgia, serif;
  --body: "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  --utility: "IBM Plex Sans Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--void);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

button, input, textarea { font: inherit; }
button { color: inherit; }
button, [tabindex] { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

button { border: 0; cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }
svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; z-index: 9999; top: 12px; left: 12px; padding: 10px 14px; color: var(--void); background: var(--cyan); border-radius: 10px; transform: translateY(-160%); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }
.mobile-blocker { position: fixed; z-index: 500; inset: 0; display: none; place-items: center; align-content: center; padding: 34px 26px; color: var(--ink); text-align: center; background: radial-gradient(circle at 50% 24%,rgba(98,69,137,.45),transparent 34%),linear-gradient(155deg,#100c1e,#171226 62%,#101c2b); overflow: hidden; }
.mobile-blocker::before { content: ""; position: absolute; width: 130vw; aspect-ratio: 1; border: 1px solid rgba(182,164,255,.1); border-radius: 50%; box-shadow: inset 0 0 90px rgba(125,228,226,.04); }
.mobile-blocker__signal { position: relative; display: grid; place-items: center; width: 126px; height: 126px; margin-bottom: 32px; }
.mobile-blocker__signal i { position: absolute; inset: 8px; border: 1px solid rgba(182,164,255,.42); border-radius: 50%; animation: brand-spin 12s linear infinite; }
.mobile-blocker__signal i:nth-child(2) { inset: 24px -6px; border-color: rgba(255,141,123,.5); animation-direction: reverse; animation-duration: 8s; }
.mobile-blocker__signal span { display: grid; place-items: center; width: 70px; height: 70px; color: #26182c; background: conic-gradient(var(--coral),var(--apricot),var(--cyan),var(--lilac),var(--coral)); border-radius: 50%; box-shadow: 0 0 50px rgba(182,164,255,.32); font-size: 25px; }
.mobile-blocker h1 { position: relative; max-width: 620px; margin: 0 0 20px; font: 400 clamp(35px,9vw,58px)/1.08 var(--display); letter-spacing: -.045em; }
.mobile-blocker > p:not(.micro-label) { position: relative; max-width: 510px; margin-bottom: 24px; color: var(--ink-soft); font-size: 13px; line-height: 1.8; }
.mobile-blocker small { position: relative; color: var(--ink-dim); font-size: 11px; letter-spacing: .08em; }
body.mobile-blocked { overflow: hidden; }
body.mobile-blocked .mobile-blocker { display: grid; }
body.mobile-blocked .app-shell, body.mobile-blocked .skip-link { display: none; }

.ambient { position: fixed; z-index: -2; inset: 0; overflow: hidden; pointer-events: none; }
.ambient__wash { position: absolute; border-radius: 50%; filter: blur(96px); opacity: .32; }
.ambient__wash--one { width: 46vw; height: 46vw; left: 2vw; top: -18vw; background: #503176; animation: drift-one 28s ease-in-out infinite alternate; }
.ambient__wash--two { width: 38vw; height: 38vw; right: -12vw; top: 30vh; background: #174f62; opacity: .2; animation: drift-two 34s ease-in-out infinite alternate; }
.ambient__grain { position: absolute; inset: 0; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }

.app-shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; }
.nav-rail { position: fixed; z-index: 30; inset: 0 auto 0 0; width: var(--rail); display: flex; flex-direction: column; align-items: center; padding: 22px 13px; background: rgba(13, 9, 25, .72); border-right: 1px solid var(--line); backdrop-filter: blur(28px); }
.brand { display: grid; place-items: center; gap: 7px; width: 100%; padding: 5px; color: var(--ink); background: transparent; }
.brand__mark { position: relative; display: block; width: 36px; height: 36px; }
.brand__mark i { position: absolute; inset: 7px; border: 1px solid var(--lilac); border-radius: 50% 48% 52% 46%; transform: rotate(16deg); }
.brand__mark i:nth-child(2) { inset: 3px 12px; border-color: var(--coral); transform: rotate(-24deg); }
.brand__mark i:nth-child(3) { inset: 13px 3px; border-color: var(--cyan); transform: rotate(38deg); }
.brand__word { font-family: var(--display); font-size: 15px; letter-spacing: .18em; }
.nav-rail__items { display: grid; gap: 8px; width: 100%; margin: auto 0; }
.nav-item { position: relative; display: grid; place-items: center; gap: 5px; width: 100%; min-height: 64px; padding: 9px 3px; color: var(--ink-dim); background: transparent; border-radius: 18px; transition: color .25s ease, background .25s ease, transform .25s ease; }
.nav-item svg { width: 21px; height: 21px; }
.nav-item span { font-size: 12px; letter-spacing: .06em; }
.nav-item::before { content: ""; position: absolute; left: -13px; width: 3px; height: 0; border-radius: 0 4px 4px 0; background: var(--cyan); box-shadow: 0 0 16px rgba(121,216,211,.42); transition: height .25s ease; }
.nav-item:hover { color: var(--ink); background: rgba(255,255,255,.055); transform: translateY(-1px); }
.nav-item.is-active { color: var(--ink); background: rgba(121,216,211,.09); }
.nav-item.is-active::before { height: 28px; }
.nav-rail__footer { display: grid; justify-items: center; gap: 14px; }
.quiet-icon { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; color: var(--ink-soft); background: transparent; border-radius: 50%; }
.quiet-icon:hover { background: rgba(255,255,255,.08); }
.quiet-icon svg { width: 18px; height: 18px; }
.avatar-button, .mobile-avatar { position: relative; display: grid; place-items: center; width: 42px; height: 42px; color: #26182c; background: linear-gradient(145deg, var(--apricot), var(--rose)); border-radius: 50%; font-family: var(--display); font-weight: 700; box-shadow: 0 8px 24px rgba(239,135,195,.25); }
.avatar-button i { position: absolute; right: 1px; bottom: 1px; width: 9px; height: 9px; background: var(--mint); border: 2px solid var(--night); border-radius: 50%; }
.mobile-header, .mobile-nav { display: none; }

.main-content { grid-column: 2; width: 100%; max-width: 1480px; padding: 42px clamp(32px, 4.8vw, 78px) 84px; margin: 0 auto; }
.view { animation: page-enter .55s cubic-bezier(.2,.75,.2,1) both; }
.view-header { display: flex; justify-content: space-between; gap: 32px; align-items: flex-end; margin-bottom: 38px; }
.view-header h1 { max-width: 1040px; margin-bottom: 0; font-family: var(--display); font-size: clamp(44px, 4.7vw, 72px); font-weight: 400; line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
.view-header h1 span { color: var(--ink-soft); }
.eyebrow, .micro-label { margin-bottom: 10px; color: var(--cyan); font-family: var(--utility); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.header-actions { display: flex; align-items: center; gap: 10px; padding-bottom: 5px; }
.signal-button { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: var(--ink-soft); background: rgba(255,255,255,.055); border: 1px solid var(--line); border-radius: 999px; }
.signal-button:hover { color: var(--ink); border-color: var(--line-strong); }
kbd { padding: 3px 6px; color: var(--ink-dim); background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 6px; font-family: var(--utility); font-size: 12px; }
.icon-button { position: relative; display: grid; place-items: center; width: 43px; height: 43px; padding: 0; color: var(--ink-soft); background: rgba(255,255,255,.055); border: 1px solid var(--line); border-radius: 50%; }
.icon-button svg { width: 19px; height: 19px; }
.icon-button i { position: absolute; top: 8px; right: 9px; width: 6px; height: 6px; background: var(--coral); border-radius: 50%; box-shadow: 0 0 0 3px var(--night); }

.home-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .72fr); gap: 18px; }
.constellation-card, .pulse-card, .studio-canvas, .studio-inspector, .family-overview, .memory-timeline, .expert-section {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(39,31,53,.84), rgba(24,19,35,.82));
  box-shadow: inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(16px);
}
.constellation-card { position: relative; min-height: 580px; padding: clamp(22px, 2.5vw, 36px); overflow: hidden; border-radius: var(--radius-xl); box-shadow: inset 0 1px rgba(255,255,255,.045), var(--shadow); transform: perspective(1200px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transform-style: preserve-3d; transition: transform .32s ease-out, border-color .3s ease; }
.constellation-card::before { content: ""; position: absolute; z-index: 0; inset: 0; background: radial-gradient(circle at var(--glow-x,50%) var(--glow-y,45%),rgba(182,164,255,.13),transparent 34%); pointer-events: none; }
.constellation-card::after { content: ""; position: absolute; width: 440px; height: 440px; right: -220px; bottom: -240px; border: 1px solid rgba(125,228,226,.12); border-radius: 50%; box-shadow: 0 0 80px rgba(125,228,226,.08); }
.constellation-card__top, .section-heading { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.constellation-card h2, .section-heading h2, .studio-empty h2, .memory-timeline h2, .expert-section h2 { margin-bottom: 0; font-family: var(--display); font-size: clamp(24px, 2.2vw, 35px); font-weight: 400; letter-spacing: -.035em; }
.time-chip { padding: 9px 12px; color: var(--ink-soft); background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 999px; font-family: var(--utility); font-size: 12px; letter-spacing: .05em; }
.constellation { position: relative; min-height: 420px; margin: -10px auto 0; isolation: isolate; }
.orbit { position: absolute; z-index: -1; left: 50%; top: 48%; border: 1px solid rgba(216,204,255,.12); border-radius: 50%; transform: translate(-50%,-50%); }
.orbit::before, .orbit::after { content: ""; position: absolute; width: 5px; height: 5px; background: var(--lilac); border-radius: 50%; box-shadow: 0 0 14px var(--lilac); }
.orbit--outer { width: min(77%, 520px); aspect-ratio: 1.55; transform: translate(-50%,-50%) rotate(-7deg); animation: orbit-breathe 7s ease-in-out infinite; }
.orbit--outer::before { left: 16%; top: 2%; }
.orbit--outer::after { right: 8%; bottom: 14%; background: var(--cyan); }
.orbit--inner { width: min(50%, 330px); aspect-ratio: 1.1; transform: translate(-50%,-50%) rotate(14deg); animation: orbit-breathe 5s 1s ease-in-out infinite reverse; }
.orbit--inner::before { right: 5%; top: 12%; background: var(--coral); }
.orbit--inner::after { left: 5%; bottom: 12%; background: var(--apricot); }
.family-node { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; min-width: 146px; padding: 8px 11px 8px 8px; color: var(--ink); text-align: left; background: rgba(20,16,33,.76); border: 1px solid var(--line); border-radius: 999px; backdrop-filter: blur(14px); box-shadow: 0 12px 30px rgba(4,2,15,.24); transition: transform .3s ease, border-color .3s ease; }
.family-node:hover { transform: translateY(-4px); border-color: rgba(182,164,255,.42); }
.family-node__avatar { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 auto; color: #211829; background: linear-gradient(145deg, var(--apricot), var(--rose)); border-radius: 50%; font-family: var(--display); font-size: 13px; }
.family-node b, .family-node small { display: block; }
.family-node b { font-size: 12px; }
.family-node small { margin-top: 2px; color: var(--ink-dim); font-size: 12px; }
.family-node--self { left: 5%; top: 33%; }
.family-node--child { right: 3%; top: 23%; }
.family-node--child .family-node__avatar { background: linear-gradient(145deg, var(--cyan), var(--lilac)); }
.family-node--pet { right: 8%; bottom: 14%; }
.family-node--pet .family-node__avatar { background: linear-gradient(145deg, var(--mint), var(--apricot)); }
.ai-core { position: absolute; z-index: 4; left: 50%; top: 48%; width: 148px; height: 148px; padding: 0; color: var(--ink); background: transparent; border-radius: 50%; transform: translate(-50%,-50%); }
.ai-core__halo, .ai-core__mesh { position: absolute; inset: 0; border-radius: inherit; }
.ai-core__halo { background: conic-gradient(from 30deg, var(--coral), var(--apricot), var(--cyan), var(--lilac), var(--coral)); filter: blur(3px); animation: core-turn 15s linear infinite; box-shadow: 0 0 54px rgba(183,167,232,.32), 0 0 96px rgba(121,216,211,.1); }
.ai-core__halo::after { content: ""; position: absolute; inset: 8px; background: radial-gradient(circle at 38% 28%, rgba(255,255,255,.64), transparent 14%), radial-gradient(circle at 50% 65%, #2a1b43, #161027 70%); border-radius: inherit; }
.ai-core__mesh { inset: 11px; opacity: .52; background: repeating-radial-gradient(circle at 45% 42%, transparent 0 8px, rgba(255,255,255,.1) 9px 10px); animation: core-pulse 3.8s ease-in-out infinite; }
.ai-core__face { position: absolute; z-index: 2; inset: 52px 43px 54px; display: flex; justify-content: space-between; }
.ai-core__face i { width: 12px; height: 5px; background: var(--cyan); border-radius: 100%; box-shadow: 0 0 12px var(--cyan); animation: blink 5s infinite; }
.ai-core__label { position: absolute; left: 50%; bottom: -29px; color: var(--ink-soft); font-size: 12px; letter-spacing: .14em; transform: translateX(-50%); }
.constellation__prompt { position: absolute; left: 50%; bottom: 22px; margin: 0; color: var(--ink-dim); font-size: 12px; letter-spacing: .04em; transform: translateX(-50%); white-space: nowrap; }
.constellation-scan { position: absolute; z-index: 2; left: 18%; top: 13%; width: 2px; height: 72%; opacity: 0; background: linear-gradient(transparent,var(--cyan),transparent); box-shadow: 0 0 22px 3px rgba(125,228,226,.34); pointer-events: none; }
.constellation-card__actions { position: relative; z-index: 3; display: flex; justify-content: center; gap: 10px; }
.primary-action, .secondary-action { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 52px; padding: 0 22px; border-radius: 999px; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.primary-action { color: #1b1220; background: linear-gradient(105deg, var(--apricot), var(--coral)); font-weight: 700; box-shadow: 0 12px 30px rgba(255,152,124,.18); }
.primary-action:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(255,141,123,.28); }
.primary-action svg { width: 18px; height: 18px; }
.primary-action--small { min-height: 44px; }
.primary-action--light { color: var(--void); background: var(--ink); }
.secondary-action { color: var(--ink-soft); background: transparent; border: 1px solid var(--line-strong); }
.secondary-action:hover { color: var(--ink); background: rgba(255,255,255,.05); transform: translateY(-2px); }
.pulse-stack { display: grid; gap: 14px; }
.pulse-card { padding: 22px; border-radius: var(--radius-md); box-shadow: none; }
.pulse-card--accent { background: linear-gradient(155deg, rgba(89,57,90,.78), rgba(34,27,49,.8)); }
.pulse-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 19px; color: var(--ink-soft); font-size: 12px; }
.pulse-card__head small { margin-left: auto; color: var(--ink-dim); font-family: var(--utility); letter-spacing: .08em; }
.pulse-card__head small { font-size: 12px; }
.pulse-dot { width: 7px; height: 7px; background: var(--coral); border-radius: 50%; box-shadow: 0 0 0 5px rgba(255,141,123,.1), 0 0 16px var(--coral); animation: live-dot 2s ease-out infinite; }
.pulse-card h3 { margin-bottom: 12px; font-family: var(--display); font-size: 21px; font-weight: 400; line-height: 1.42; }
.pulse-card > p { margin-bottom: 20px; color: var(--ink-dim); font-size: 14px; line-height: 1.72; }
.text-action { padding: 0; color: var(--ink-soft); background: transparent; font-size: 13px; }
.text-action span { display: inline-block; margin-left: 5px; color: var(--coral); transition: transform .2s ease; }
.text-action:hover span { transform: translateX(4px); }
.memory-quote { margin: 0 0 24px; padding-left: 14px; color: var(--ink-soft); border-left: 1px solid var(--lilac); font-family: var(--display); font-size: 17px; line-height: 1.6; }
.pulse-card--compact { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; }
.pulse-card--compact > div { display: flex; align-items: center; gap: 10px; }
.pulse-card--compact p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.pulse-card--compact small { color: var(--ink-dim); }
.pulse-card--compact small { font-size: 12px; }
.weather-orb { width: 34px; height: 34px; background: radial-gradient(circle at 35% 35%, #fff7bf 0 7%, var(--apricot) 8% 26%, #6c507d 28% 45%, #29203c 46%); border-radius: 50%; box-shadow: 0 0 24px rgba(255,199,136,.25); }
.round-arrow { width: 34px; height: 34px; color: var(--ink-soft); background: rgba(255,255,255,.06); border-radius: 50%; }

.section-block { margin-top: 72px; }
.section-heading { align-items: flex-end; margin-bottom: 20px; }
.meal-rail { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 15px; }
.meal-card { overflow: hidden; min-width: 0; border: 1px solid var(--line); background: rgba(31,25,47,.68); border-radius: var(--radius-lg); transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease; }
.meal-card:hover, .meal-card:focus-within { border-color: var(--line-strong); transform: translateY(-7px); box-shadow: 0 24px 60px rgba(4,2,15,.3); }
.meal-card__visual { position: relative; display: grid; place-items: center; height: 250px; overflow: hidden; }
.meal-card__visual::before { content: ""; position: absolute; inset: 0; opacity: .84; }
.meal-card--pumpkin .meal-card__visual::before { background: radial-gradient(circle at 66% 20%, #ffb57a, transparent 24%), linear-gradient(145deg, #5e3144, #bd6b55 45%, #362439); }
.meal-card--green .meal-card__visual::before { background: radial-gradient(circle at 20% 30%, #a1d59c, transparent 23%), linear-gradient(145deg, #243d3b, #587151 50%, #28263e); }
.meal-card--berry .meal-card__visual::before { background: radial-gradient(circle at 75% 28%, #eba4be, transparent 24%), linear-gradient(145deg, #55334f, #7f577e 50%, #24213a); }
.meal-card .meal-card__visual::before { z-index: 1; opacity: 1; background: linear-gradient(180deg,rgba(15,10,26,.02),rgba(15,10,26,.08) 54%,rgba(15,10,26,.66)); pointer-events: none; }
.meal-card__visual img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.015); will-change: transform; }
.meal-card__visual > span { position: absolute; left: 18px; top: 16px; z-index: 2; color: rgba(255,255,255,.75); font-family: var(--utility); font-size: 12px; letter-spacing: .12em; }
.plate { position: relative; z-index: 1; width: 148px; height: 148px; background: #eee8dc; border-radius: 50%; box-shadow: 0 30px 44px rgba(10,5,20,.36), inset 0 0 0 13px rgba(255,255,255,.35); transform: rotate(-7deg); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.meal-card:hover .plate { transform: rotate(1deg) scale(1.055); }
.plate::before, .plate::after { content: ""; position: absolute; border-radius: 50%; }
.plate--one::before { inset: 32px 38px 58px 30px; background: radial-gradient(circle at 50% 50%, #ee9268 0 18%, #f5bb6f 20% 60%, #9e4e43 62%); box-shadow: 34px 31px 0 -5px #d77c69, 6px 52px 0 -8px #548f69; }
.plate--one::after { width: 22px; height: 48px; right: 30px; top: 37px; background: #f0a475; transform: rotate(35deg); }
.plate--two::before { inset: 34px; background: conic-gradient(#6f9c65, #d2b579, #b96153, #8db77b, #e4c789, #6f9c65); }
.plate--two::after { inset: 53px; background: #e1b36b; box-shadow: 23px -11px 0 -8px #f1ddd0; }
.plate--three::before { inset: 33px; background: radial-gradient(circle at 40% 35%, #a0476a 0 8%, transparent 9%), radial-gradient(circle at 66% 60%, #823f6a 0 9%, transparent 10%), radial-gradient(circle at 48% 50%, #e8d3c2 0 48%, #a97a88 50%); }
.meal-card__body { display: flex; justify-content: space-between; gap: 14px; align-items: end; padding: 18px 20px 21px; }
.meal-card__body small { color: var(--ink-dim); font-size: 12px; }
.meal-card__body h3 { margin: 5px 0 0; font-family: var(--display); font-size: 19px; font-weight: 400; }
.meal-card__body button { width: 36px; height: 36px; flex: 0 0 auto; color: var(--ink); background: rgba(255,255,255,.07); border-radius: 50%; }
.quick-actions { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 13px; }
.quick-card { position: relative; min-height: 170px; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; color: var(--ink); text-align: left; background: rgba(31,25,47,.62); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; transition: background .3s ease, transform .3s ease; }
.quick-card::after { content: ""; position: absolute; right: -55px; bottom: -55px; width: 140px; height: 140px; background: radial-gradient(circle, rgba(182,164,255,.18), transparent 68%); }
.quick-card:hover { background: rgba(47,38,67,.8); transform: translateY(-4px); }
.quick-card__number { color: var(--coral); font-family: var(--display); font-size: 28px; }
.quick-card small { color: var(--ink-dim); font-size: 10px; }
.quick-card h3 { max-width: 310px; margin: 6px 0 0; font-family: var(--display); font-size: 18px; font-weight: 400; line-height: 1.45; }
.quick-card > i { position: absolute; top: 20px; right: 20px; font-style: normal; color: var(--ink-dim); }

.segmented { display: flex; gap: 4px; padding: 4px; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 999px; }
.segmented button { padding: 9px 15px; color: var(--ink-dim); background: transparent; border-radius: 999px; font-size: 12px; }
.segmented button.is-active { color: var(--void); background: var(--ink); }
.discovery-feature { position: relative; min-height: 370px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; margin-bottom: 18px; border-radius: var(--radius-xl); background: linear-gradient(120deg, #d89576 0 45%, #773b4d 46% 66%, #2d263f); box-shadow: var(--shadow); }
.discovery-feature__copy { position: relative; z-index: 2; padding: clamp(28px,4vw,56px); color: #241520; background: linear-gradient(90deg, rgba(255,213,178,.95), rgba(255,213,178,.86), transparent); }
.discovery-feature__copy .micro-label { color: #7c3d42; }
.discovery-feature__copy h2 { max-width: 520px; margin-bottom: 18px; font-family: var(--display); font-size: clamp(30px,3.8vw,55px); font-weight: 400; line-height: 1.05; letter-spacing: -.045em; }
.discovery-feature__copy p:not(.micro-label) { max-width: 430px; color: rgba(36,21,32,.72); font-size: 13px; line-height: 1.7; }
.soup-visual { position: relative; min-height: 370px; }
.soup-visual::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg,rgba(216,149,118,.92),rgba(67,34,53,.12) 35%,rgba(13,9,24,.08)); pointer-events: none; }
.soup-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; will-change: transform; }
.soup-visual i { position: absolute; z-index: 2; width: 25px; height: 12px; left: calc(48% + var(--x)); top: calc(52% + var(--y)); background: var(--fill); border-radius: 50%; transform: translate(-50%,-50%) rotate(var(--r)); }
.soup-visual i:nth-child(1) { --x:-40px; --y:-34px; --fill:#f5cd7e; --r:18deg; }
.soup-visual i:nth-child(2) { --x:32px; --y:-18px; --fill:#89a85e; --r:-25deg; }
.soup-visual i:nth-child(3) { --x:8px; --y:42px; --fill:#eaa28a; --r:8deg; }
.soup-visual span { position: absolute; z-index: 2; right: 20px; bottom: 20px; padding: 9px 13px; color: var(--ink); background: rgba(20,12,26,.55); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; font-family: var(--utility); font-size: 12px; backdrop-filter: blur(10px); }
.discovery-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); grid-auto-flow: dense; gap: 14px; }
.story-card { min-height: 340px; padding: 12px; background: rgba(31,25,47,.62); border: 1px solid var(--line); border-radius: var(--radius-md); transition: transform .3s ease, border-color .3s ease; }
.story-card:hover { transform: translateY(-5px); border-color: var(--line-strong); }
.story-card--wide { grid-column: span 2; }
.story-card--tall { grid-row: span 2; }
.story-art { position: relative; min-height: 245px; margin-bottom: 14px; overflow: hidden; border-radius: calc(var(--radius-md) - 8px); }
.story-card--tall .story-art { min-height: 604px; }
.story-art span { position: absolute; left: 12px; top: 12px; padding: 6px 9px; color: rgba(255,255,255,.9); background: rgba(20,15,28,.5); border: 1px solid rgba(255,255,255,.15); border-radius: 999px; font-size: 12px; backdrop-filter: blur(8px); }
.story-art span { z-index: 2; }
.story-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .4s ease; will-change: transform; }
.story-art::before { z-index: 1; inset: 0 !important; width: auto !important; height: auto !important; background: linear-gradient(180deg,rgba(14,9,23,.02),rgba(14,9,23,.38)) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; pointer-events: none; }
.story-art::after { display: none; }
.story-art::before, .story-art::after { content: ""; position: absolute; }
.story-art--one { background: linear-gradient(165deg,#8a604b,#3f2934 60%,#1f1b2d); }
.story-art--one::before { inset: 16% 13%; background: radial-gradient(ellipse,#e2b066 0 28%,#a44f3e 29% 42%,#38242a 43% 54%,transparent 55%); border-radius: 50%; box-shadow: 0 24px 50px rgba(0,0,0,.3); }
.story-art--one::after { width: 2px; height: 42%; right: 27%; top: 22%; background: rgba(245,231,194,.55); transform: rotate(19deg); box-shadow: 11px 0 rgba(245,231,194,.35); }
.story-art--two { background: linear-gradient(145deg,#e6d6be,#bc9f86); }
.story-art--two::before { width: 150px; height: 150px; left: 50%; top: 52%; background: radial-gradient(circle at 35% 38%,#e1a56b 0 13%,transparent 14%),radial-gradient(circle at 65% 58%,#779a62 0 12%,transparent 13%),#f3ede4; border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 20px 40px rgba(63,44,42,.2); }
.story-art--three { background: linear-gradient(135deg,#54344d,#9f5f7b 48%,#dfa38e); }
.story-art--three::before { inset: 17%; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; box-shadow: inset 0 0 60px rgba(255,210,190,.18); }
.story-art--four { background: linear-gradient(120deg,#314b47,#6f916d 55%,#d0aa79); }
.story-art--four::before { inset: 23% 12%; background: repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 20%); }
.story-art--five { background: linear-gradient(145deg,#42253f,#a0526c 62%,#e89e85); }
.story-art--five::before { width: 120px; height: 190px; left: 50%; top: 50%; background: linear-gradient(#f1d3c5,#a74f61); border-radius: 60px 60px 30px 30px; transform: translate(-50%,-50%) rotate(7deg); box-shadow: inset 0 0 0 14px rgba(255,255,255,.12); }
.story-art--six { background: linear-gradient(145deg,#44505d,#8e6f72 55%,#d9a673); }
.story-art--six::before { width: 120px; height: 120px; left: 50%; top: 50%; background: radial-gradient(circle at 36% 40%,#2b2022 0 5%,transparent 6%),radial-gradient(circle at 66% 40%,#2b2022 0 5%,transparent 6%),radial-gradient(circle at 50% 59%,#2b2022 0 8%,transparent 9%),#d49b65; border-radius: 50% 50% 46% 46%; transform: translate(-50%,-50%); }
.story-card small { color: var(--ink-dim); font-size: 10px; }
.story-card h3 { margin: 5px 4px 6px; font-family: var(--display); font-size: 20px; font-weight: 400; line-height: 1.4; }

.studio-layout { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(270px,.62fr); gap: 18px; }
.studio-canvas { min-height: 650px; overflow: hidden; border-radius: var(--radius-xl); }
.studio-empty { min-height: 650px; display: grid; place-items: center; align-content: center; padding: 30px; text-align: center; }
.studio-empty__plate { position: relative; width: 230px; height: 230px; margin-bottom: 28px; background: radial-gradient(circle,#ede6dc 0 40%,#c9bdba 41% 47%,#786b7b 48% 49%,transparent 50%); border-radius: 50%; filter: drop-shadow(0 32px 38px rgba(4,2,15,.35)); animation: plate-float 5s ease-in-out infinite; }
.studio-empty__plate { overflow: hidden; background: var(--night-2); border: 8px solid rgba(255,255,255,.08); }
.studio-empty__plate img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.studio-empty__plate i { position: absolute; width: 48px; height: 48px; background: var(--fill); border-radius: 50%; left: var(--left); top: var(--top); }
.studio-empty__plate i:nth-child(1) { --fill:var(--coral); --left:62px; --top:75px; }
.studio-empty__plate i:nth-child(2) { --fill:var(--mint); --left:114px; --top:92px; width:62px; height:34px; transform:rotate(22deg); }
.studio-empty__plate i:nth-child(3) { --fill:var(--apricot); --left:89px; --top:127px; width:35px; height:27px; }
.studio-empty p { max-width: 520px; color: var(--ink-dim); font-size: 13px; line-height: 1.8; }
.studio-empty > div:last-child { display: flex; gap: 10px; margin-top: 10px; }
.studio-inspector { padding: 28px; border-radius: var(--radius-lg); box-shadow: none; }
.process-list { display: grid; gap: 8px; padding: 0; margin: 22px 0 35px; list-style: none; }
.process-list li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 15px 11px; color: var(--ink-dim); border-radius: 16px; transition: background .3s ease, color .3s ease; }
.process-list li.is-active { color: var(--ink); background: rgba(182,164,255,.1); }
.process-list li > span { color: var(--coral); font-family: var(--utility); font-size: 10px; }
.process-list b, .process-list small { display: block; }
.process-list b { margin-bottom: 4px; font-size: 12px; }
.process-list small { color: var(--ink-dim); font-size: 10px; }
.inspector-note { display: flex; gap: 10px; padding-top: 20px; color: var(--ink-dim); border-top: 1px solid var(--line); }
.inspector-note span { color: var(--cyan); }
.inspector-note p { margin: 0; font-size: 10px; line-height: 1.65; }
.analysis-stage { min-height: 650px; display: grid; place-items: center; align-content: center; padding: 30px; }
.analysis-image { position: relative; width: min(76%,560px); aspect-ratio: 1.35; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 48%,#f2a77b 0 8%,#d5ba74 9% 18%,#6f8c65 19% 28%,#47344e 29% 40%,transparent 41%),linear-gradient(135deg,#a28587,#504158); border-radius: 28px; box-shadow: var(--shadow); }
.analysis-image { background-image: linear-gradient(180deg,rgba(21,13,42,.05),rgba(21,13,42,.45)),url("assets/images/studio-pumpkin.webp"); background-size: cover; background-position: center; }
.analysis-image.has-image { background-size: cover; background-position: center; }
.analysis-image > span { position: absolute; left: 16px; bottom: 14px; padding: 7px 10px; background: rgba(13,9,25,.68); border-radius: 999px; font-size: 10px; }
.scan-line { position: absolute; z-index: 2; inset: 0 auto 0 0; width: 2px; background: var(--cyan); box-shadow: 0 0 22px 5px var(--cyan); animation: scan 2s ease-in-out infinite; }
.analysis-progress { width: min(76%,560px); margin-top: 25px; }
.analysis-progress i { display: block; width: 32%; height: 3px; margin-bottom: 10px; background: linear-gradient(90deg,var(--coral),var(--cyan)); border-radius: 3px; animation: progress-load 2.4s ease-in-out infinite; }
.analysis-progress span { color: var(--ink-dim); font-size: 11px; }
.studio-result { min-height: 650px; display: grid; place-items: center; align-content: center; padding: 30px; }
.cover-art { position: relative; width: min(76%,500px); aspect-ratio: .82; overflow: hidden; padding: 30px; color: #2a1724; background: linear-gradient(155deg,#ffd4a2,#ef8a77 55%,#9e4c6f); border-radius: 32px; box-shadow: 0 40px 80px rgba(7,3,15,.44); animation: cover-arrive .7s cubic-bezier(.2,.8,.2,1) both; }
.cover-art__dish { position: absolute; right: -5%; top: 13%; width: 66%; aspect-ratio: 1; background: radial-gradient(circle,#e8a263 0 14%,#6a9164 15% 25%,#d16855 26% 38%,#f1ded0 39% 48%,transparent 49%); border-radius: 50%; filter: drop-shadow(0 25px 30px rgba(57,24,32,.28)); transform: rotate(8deg); }
.cover-art__dish { background-image: url("assets/images/studio-pumpkin.webp"); background-size: cover; background-position: center; border: 10px solid rgba(255,255,255,.24); }
.cover-art__dish.has-image { background-size: cover; background-position: center; }
.cover-art__stamp { position: absolute; right: 20px; bottom: 22px; color: rgba(42,23,36,.65); font-family: var(--utility); font-size: 9px; letter-spacing: .18em; writing-mode: vertical-rl; }
.cover-art > div:last-child { position: absolute; left: 28px; bottom: 30px; z-index: 2; }
.cover-art small { font-size: 10px; letter-spacing: .15em; }
.cover-art h2 { margin: 8px 0 0; font-family: var(--display); font-size: clamp(34px,4vw,54px); font-weight: 400; line-height: 1; }
.result-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.result-meta span, .result-tags span { padding: 7px 10px; color: var(--ink-soft); background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 999px; font-size: 9px; }

.family-dashboard { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 18px; }
.family-overview, .memory-timeline, .expert-section { padding: 26px; border-radius: var(--radius-lg); box-shadow: none; }
.family-overview__head { display: flex; align-items: center; gap: 14px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.large-avatar { display: grid; place-items: center; width: 58px; height: 58px; color: #281728; background: linear-gradient(145deg,var(--apricot),var(--rose)); border-radius: 50%; font-family: var(--display); font-size: 24px; }
.family-overview__head small { color: var(--ink-dim); font-size: 10px; }
.family-overview__head h2 { margin: 3px 0 0; font-family: var(--display); font-size: 28px; font-weight: 400; }
.trust-badge { margin-left: auto; padding: 7px 10px; color: var(--mint); background: rgba(153,227,180,.08); border: 1px solid rgba(153,227,180,.16); border-radius: 999px; font-size: 9px; }
.family-members { display: grid; gap: 8px; margin-top: 18px; }
.member-card { display: grid; grid-template-columns: 38px 1fr 20px; align-items: center; gap: 11px; width: 100%; padding: 11px; color: var(--ink); text-align: left; background: transparent; border: 1px solid transparent; border-radius: 16px; }
.member-card:hover, .member-card.is-active { background: rgba(255,255,255,.045); border-color: var(--line); }
.member-card > span { display: grid; place-items: center; width: 38px; height: 38px; color: var(--void); background: var(--lilac); border-radius: 50%; font-family: var(--display); }
.member-card:nth-child(2)>span { background: var(--cyan); }
.member-card:nth-child(3)>span { background: var(--mint); }
.member-card b, .member-card small { display: block; }
.member-card b { font-size: 12px; }
.member-card small { margin-top: 3px; color: var(--ink-dim); font-size: 9px; }
.member-card > i { color: var(--ink-dim); font-style: normal; }
.member-card--add { opacity: .62; }
.member-card--add > span { color: var(--ink-soft); background: transparent; border: 1px dashed var(--line-strong); }
.timeline-list { display: grid; gap: 0; margin-top: 25px; }
.timeline-list article { display: grid; grid-template-columns: 58px 9px 1fr; gap: 12px; min-height: 112px; }
.timeline-list time { color: var(--ink-dim); font-family: var(--utility); font-size: 9px; }
.timeline-list article > span { position: relative; width: 7px; height: 7px; background: var(--lilac); border-radius: 50%; box-shadow: 0 0 0 4px rgba(182,164,255,.08); }
.timeline-list article > span::after { content: ""; position: absolute; left: 3px; top: 11px; width: 1px; height: 88px; background: var(--line); }
.timeline-list article:last-child > span::after { display: none; }
.timeline-list article > div { position: relative; padding-right: 48px; }
.timeline-list small { color: var(--coral); font-size: 9px; }
.timeline-list p { margin: 5px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.65; }
.timeline-list button { position: absolute; right: 0; top: 0; padding: 3px; color: var(--ink-dim); background: transparent; font-size: 9px; }
.expert-section { margin-top: 18px; }
.status-copy { color: var(--ink-dim); font-family: var(--utility); font-size: 10px; }
.expert-rail { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 20px; }
.expert-card { min-height: 230px; display: flex; flex-direction: column; align-items: flex-start; padding: 17px; color: var(--ink); text-align: left; background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 20px; transition: transform .3s ease, background .3s ease; }
.expert-card:hover { transform: translateY(-5px); background: rgba(255,255,255,.065); }
.expert-face { display: block; width: 62px; height: 62px; margin-bottom: auto; object-fit: cover; background: var(--bg); border: 2px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: inset 0 0 18px rgba(255,255,255,.18), 0 14px 30px rgba(4,2,15,.2); }
.expert-face--one { --bg:linear-gradient(140deg,#ff9c82,#5058ac 55%,#162942); }
.expert-face--two { --bg:linear-gradient(140deg,#f7c6a0,#904f80 48%,#2f335f); }
.expert-face--three { --bg:linear-gradient(140deg,#ffc16f,#b54853 48%,#181a42); }
.expert-face--four { --bg:linear-gradient(140deg,#ffb3c7,#82b6d2 48%,#624c9f); }
.expert-card small { color: var(--coral); font-size: 9px; }
.expert-card b { margin-top: 6px; font-family: var(--display); font-size: 21px; font-weight: 400; }
.expert-card span { margin-top: 8px; color: var(--ink-dim); font-size: 10px; line-height: 1.55; }

.companion-launcher { position: fixed; z-index: 24; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 12px; width: 58px; height: 58px; min-width: 58px; padding: 9px; overflow: hidden; color: var(--ink); text-align: left; white-space: nowrap; background: rgba(27,21,39,.9); border: 1px solid var(--line-strong); border-radius: 50%; box-shadow: 0 18px 44px rgba(4,2,15,.38); backdrop-filter: blur(18px); transition: width .34s cubic-bezier(.2,.8,.2,1), border-radius .3s ease, opacity .25s ease, transform .3s cubic-bezier(.2,.8,.2,1), border-color .25s ease; }
.companion-launcher:hover, .companion-launcher:focus-visible { width: 196px; border-color: rgba(121,216,211,.42); border-radius: 20px; transform: translateY(-3px); }
.companion-launcher > span:last-child { display: grid; flex: 0 0 122px; gap: 2px; opacity: 0; transform: translateX(8px); transition: opacity .2s ease .05s, transform .28s ease; }
.companion-launcher:hover > span:last-child, .companion-launcher:focus-visible > span:last-child { opacity: 1; transform: translateX(0); }
.companion-launcher b { font-family: var(--display); font-size: 16px; font-weight: 400; }
.companion-launcher small { color: var(--ink-dim); font-size: 12px; }
body.companion-open .companion-launcher { opacity: 0; pointer-events: none; transform: translateX(20px); }
.companion-dock { position: fixed; z-index: 25; inset: 0 0 0 auto; width: min(var(--dock),calc(100vw - var(--rail))); display: flex; flex-direction: column; padding: 22px 20px 18px; background: rgba(18,13,29,.94); border-left: 1px solid var(--line); box-shadow: -20px 0 64px rgba(4,2,15,.42); backdrop-filter: blur(24px); transform: translateX(100%); visibility: hidden; transition: transform .42s cubic-bezier(.2,.8,.2,1), visibility 0s linear .42s; }
.companion-dock.is-open { transform: translateX(0); visibility: visible; transition-delay: 0s; }
.companion-dock__head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 17px; border-bottom: 1px solid var(--line); }
.companion-dock__head > div { display: flex; align-items: center; gap: 10px; }
.mini-core { width: 38px; height: 38px; flex: 0 0 auto; background: conic-gradient(var(--coral),var(--apricot),var(--cyan),var(--lilac),var(--coral)); border-radius: 50%; box-shadow: 0 0 24px rgba(183,167,232,.24); animation: core-turn 14s linear infinite; }
.companion-dock__head b, .companion-dock__head small { display: block; }
.companion-dock__head b { font-family: var(--display); font-size: 18px; font-weight: 400; }
.companion-dock__head small { margin-top: 2px; color: var(--ink-dim); font-size: 12px; }
.companion-dock__head small i { display: inline-block; width: 5px; height: 5px; background: currentColor; border-radius: 50%; box-shadow: 0 0 10px currentColor; transition: color .25s ease; }
.ai-status { transition: color .25s ease; }
.ai-status.is-online { color: var(--mint); }
.ai-status.is-thinking { color: var(--apricot); }
.ai-status.is-paused { color: var(--lilac); }
.ai-status.is-checking, .ai-status.is-offline { color: var(--ink-dim); }
.conversation { flex: 1; overflow-y: auto; padding: 24px 3px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.message { max-width: 92%; margin-bottom: 12px; }
.message small { display: block; margin-bottom: 6px; color: var(--ink-dim); font-size: 12px; }
.message p { margin: 0; padding: 14px 15px; color: var(--ink-soft); background: rgba(255,255,255,.055); border: 1px solid var(--line); border-radius: 6px 17px 17px 17px; font-size: 14px; line-height: 1.72; }
.message__bubble { margin: 0; }
.message--assistant { position: relative; padding-left: 0; }
.message--typing .message__bubble { color: var(--ink-dim); }
.message--streaming .message__bubble::after { content: ""; display: inline-block; width: 5px; height: 14px; margin-left: 3px; vertical-align: -2px; background: var(--apricot); border-radius: 3px; animation: typing .62s infinite alternate; }
.message--offline .message__bubble { border-color: rgba(182,164,255,.24); background: rgba(182,164,255,.07); }
.message__meta { display: grid; gap: 8px; margin: 8px 2px 16px; }
.message__evidence { display: flex; flex-wrap: wrap; gap: 5px; }
.message__evidence span { padding: 5px 8px; color: var(--ink-dim); background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 999px; font-size: 10px; }
.message__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.message__actions button { padding: 7px 10px; color: var(--ink-soft); background: transparent; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; }
.message__actions button:hover { color: var(--ink); border-color: rgba(121,216,211,.4); }
.message__safety { color: var(--apricot); font-size: 10px; line-height: 1.55; }
.message--user { margin-left: auto; text-align: right; }
.message--user p { color: #231627; background: linear-gradient(120deg,var(--apricot),var(--coral)); border: 0; border-radius: 17px 6px 17px 17px; text-align: left; }
.typing-dots { display: flex; gap: 4px; width: fit-content; padding: 13px 16px; background: rgba(255,255,255,.055); border: 1px solid var(--line); border-radius: 6px 17px 17px 17px; }
.typing-dots i { width: 5px; height: 5px; background: var(--ink-dim); border-radius: 50%; animation: typing 1s infinite alternate; }
.typing-dots i:nth-child(2) { animation-delay: .18s; }
.typing-dots i:nth-child(3) { animation-delay: .36s; }
.suggestion-row { display: flex; flex-wrap: wrap; gap: 6px; }
.suggestion-row button { padding: 8px 10px; color: var(--ink-soft); background: transparent; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; }
.suggestion-row button:hover { color: var(--ink); border-color: var(--line-strong); }
.composer { display: grid; grid-template-columns: 30px 1fr 32px; align-items: end; gap: 7px; padding: 8px; background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 20px; }
.composer__voice, .composer__send { width: 30px; height: 30px; padding: 0; border-radius: 50%; }
.composer__voice { color: var(--ink-dim); background: transparent; }
.composer__send { color: var(--void); background: var(--ink); }
.composer__voice.is-stop { color: var(--void); background: var(--coral); }
.composer__voice.is-stop::before { content: ""; display: block; width: 8px; height: 8px; margin: auto; background: currentColor; border-radius: 2px; }
.composer__voice.is-stop { font-size: 0; }
.composer__send:disabled { opacity: .45; cursor: wait; }
.composer textarea { max-height: 100px; resize: none; padding: 6px 2px; color: var(--ink); background: transparent; border: 0; outline: none; font-size: 14px; line-height: 1.5; }
.composer textarea::placeholder { color: var(--ink-dim); }
.ai-disclaimer { margin: 10px 0 0; color: var(--ink-dim); font-size: 11px; line-height: 1.5; text-align: center; }

.modal { width: min(720px,calc(100% - 30px)); max-height: min(880px,calc(100vh - 30px)); padding: 0; overflow-x: hidden; overflow-y: auto; color: var(--ink); background: #1b1529; border: 1px solid var(--line-strong); border-radius: 34px; box-shadow: 0 50px 140px rgba(4,2,15,.7); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.modal::backdrop { background: rgba(8,5,15,.72); backdrop-filter: blur(14px); }
.modal[open] { animation: modal-enter .45s cubic-bezier(.2,.8,.2,1) both; }
.modal__chrome { position: absolute; z-index: 5; right: 15px; top: 15px; margin: 0; }
.modal__chrome button { display: grid; place-items: center; width: 37px; height: 37px; padding: 0; color: var(--ink-soft); background: rgba(255,255,255,.06); border-radius: 50%; font-size: 22px; }
.planner { min-height: 650px; padding: 48px clamp(25px,5vw,64px) 42px; }
.planner > header { max-width: 520px; }
.planner > header h2 { margin-bottom: 10px; font-family: var(--display); font-size: clamp(30px,4.5vw,48px); font-weight: 400; line-height: 1.1; letter-spacing: -.04em; }
.planner > header p:last-child { color: var(--ink-dim); font-size: 12px; line-height: 1.7; }
.planner-progress { display: flex; align-items: center; gap: 6px; margin: 27px 0 24px; }
.planner-progress i { width: 28px; height: 3px; background: rgba(255,255,255,.1); border-radius: 3px; transition: background .3s ease, width .3s ease; }
.planner-progress i.is-active { width: 48px; background: linear-gradient(90deg,var(--coral),var(--lilac)); }
.planner-step button.is-selected { background: rgba(182,164,255,.14); border-color: rgba(182,164,255,.48); }
.planner-progress span { margin-left: auto; color: var(--ink-dim); font-family: var(--utility); font-size: 10px; }
.planner-step { display: grid; gap: 9px; }
.planner-step button { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; align-items: center; min-height: 82px; padding: 15px 18px; color: var(--ink); text-align: left; background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 19px; transition: transform .25s ease, background .25s ease, border-color .25s ease; }
.planner-step button:hover { transform: translateX(5px); background: rgba(182,164,255,.08); border-color: rgba(182,164,255,.3); }
.planner-step button span { font-family: var(--display); font-size: 19px; }
.planner-step button small { grid-column: 1; color: var(--ink-dim); font-size: 10px; }
.planner-step button i { grid-column: 2; grid-row: 1 / span 2; color: var(--coral); font-style: normal; }
.planner-loading { min-height: 360px; display: grid; place-items: center; align-content: center; }
.planner-loading p { margin: 26px 0 0; color: var(--ink-dim); font-size: 11px; }
.planner-error { min-height: 330px; display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; }
.planner-error span { font-family: var(--display); font-size: 25px; }
.planner-error p { max-width: 320px; margin: 0 0 12px; color: var(--ink-dim); font-size: 11px; line-height: 1.7; }
.planner-error__actions { display: flex; align-items: center; gap: 14px; }
.loader-core { width: 100px; height: 100px; background: conic-gradient(var(--coral),var(--apricot),var(--cyan),var(--lilac),var(--coral)); border-radius: 50%; filter: blur(.2px); animation: core-turn 2.2s linear infinite, core-pulse 2s ease-in-out infinite; box-shadow: 0 0 50px rgba(182,164,255,.24); }
.loader-core::after { content: ""; display: block; width: 78px; height: 78px; margin: 11px; background: var(--night); border-radius: 50%; }
.planner-result { display: grid; grid-template-columns: .8fr 1fr; gap: 30px; align-items: center; }
.planner-result__art { position: relative; min-height: 380px; overflow: hidden; background: linear-gradient(150deg,#ffce98,#d86f62 55%,#79435f); border-radius: 28px; }
.planner-result__art i { position: absolute; width: 270px; height: 270px; left: 50%; top: 45%; background: radial-gradient(circle,#ed9a65 0 14%,#77976c 15% 25%,#d16855 26% 37%,#f0ded1 38% 47%,transparent 48%); border-radius: 50%; transform: translate(-50%,-50%) rotate(-7deg); filter: drop-shadow(0 30px 30px rgba(70,26,32,.28)); }
.planner-result__art span { position: absolute; left: 18px; bottom: 18px; color: rgba(41,22,29,.68); font-family: var(--utility); font-size: 9px; letter-spacing: .15em; }
.planner-result > div:last-child > small { color: var(--coral); font-size: 9px; }
.planner-result h3 { margin: 8px 0 14px; font-family: var(--display); font-size: 34px; font-weight: 400; }
.planner-result p { color: var(--ink-dim); font-size: 11px; line-height: 1.75; }
.planner-result__steps { display: grid; gap: 5px; margin: 14px 0; padding: 0; list-style: none; counter-reset: planner-step; }
.planner-result__steps li { position: relative; padding-left: 24px; color: var(--ink-soft); font-size: 10px; line-height: 1.55; counter-increment: planner-step; }
.planner-result__steps li::before { content: counter(planner-step); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 16px; height: 16px; color: var(--void); background: var(--apricot); border-radius: 50%; font: 700 8px var(--utility); }
.planner-result__evidence { margin: -8px 0 18px; color: var(--ink-dim); font-size: 9px; line-height: 1.55; }
.result-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 20px 0; }
.detail-modal { width: min(630px,calc(100% - 30px)); }
#detailContent { min-height: 480px; padding: 48px; }
.detail-hero { min-height: 260px; display: grid; place-items: center; margin-bottom: 24px; overflow: hidden; background: linear-gradient(145deg,#704457,#d97b69 55%,#e6b877); border-radius: 24px; }
.detail-hero { position: relative; }
.detail-hero__image { width: 100%; height: 310px; object-fit: cover; }
.detail-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 55%,rgba(20,12,31,.4)); pointer-events: none; }
.detail-hero__spark { position: absolute; align-self: start; justify-self: end; margin: 22px; color: rgba(255,255,255,.8); font-size: 24px; }
.detail-hero__plate { position: relative; width: 176px; height: 176px; display: grid; place-items: center; background: rgba(255,245,235,.86); border: 12px solid rgba(255,255,255,.18); border-radius: 50%; box-shadow: 0 28px 55px rgba(41,14,28,.28); transform: rotate(-7deg); }
.detail-hero__plate::before { content: ""; width: 72%; height: 72%; background: radial-gradient(circle at 32% 35%,#ffc889 0 18%,transparent 19%),radial-gradient(circle at 68% 35%,#dd7c67 0 18%,transparent 19%),radial-gradient(circle at 50% 70%,#7c9d70 0 21%,transparent 22%); border-radius: 50%; }
.detail-hero__plate i { position: absolute; width: 12px; height: 12px; background: #fff1c2; border-radius: 50%; box-shadow: 48px -22px #f09477,-38px 28px #75926e; }
.detail-hero--garden { background: linear-gradient(145deg,#3f6d62,#8cac78 55%,#ddc67a); }
.detail-hero--berry { background: linear-gradient(145deg,#56365f,#b3587d 55%,#efb5a2); }
.detail-copy { color: var(--ink-dim); font-size: 12px; line-height: 1.8; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 20px 0; }
.detail-tags span { padding: 8px 11px; color: var(--ink-soft); background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 999px; font-size: 9px; }
.detail-steps { display: grid; gap: 8px; margin: 22px 0 28px; padding: 0; list-style: none; counter-reset: detail-step; }
.detail-steps li { position: relative; padding: 12px 14px 12px 46px; color: var(--ink-soft); background: rgba(255,255,255,.035); border-radius: 14px; font-size: 10px; counter-increment: detail-step; }
.detail-steps li::before { content: counter(detail-step); position: absolute; left: 13px; top: 9px; display: grid; place-items: center; width: 22px; height: 22px; color: var(--void); background: var(--apricot); border-radius: 50%; font: 700 9px var(--utility); }
.detail-story-art { position: relative; min-height: 235px; display: grid; place-items: center; margin-bottom: 24px; overflow: hidden; background: linear-gradient(145deg,#2c2650,#804a71 58%,#d28473); border-radius: 24px; }
.detail-story-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.detail-story-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 45%,rgba(20,12,31,.48)); }
.detail-story-art span { z-index: 2; display: grid; place-items: center; width: 82px; height: 82px; color: #291a35; background: radial-gradient(circle at 35% 25%,#fff1d0,#ffc0a8 50%,#a393f5); border-radius: 46% 54% 53% 47%; font-size: 28px; box-shadow: 0 0 55px rgba(255,192,168,.28); }
.detail-story-art i { position: absolute; width: 260px; height: 120px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; transform: rotate(14deg); }
.detail-story-art i:last-child { width: 180px; height: 260px; transform: rotate(-28deg); }
#detailContent h2 { margin: 7px 0 14px; font-family: var(--display); font-size: clamp(30px,4vw,42px); font-weight: 400; letter-spacing: -.035em; }
#detailContent blockquote { margin: 25px 0; padding: 17px 20px; color: var(--ink-soft); background: rgba(182,164,255,.07); border-left: 2px solid var(--lilac); border-radius: 0 14px 14px 0; font: 16px/1.7 var(--display); }
.expert-profile__avatar { display: grid; place-items: center; width: 96px; height: 96px; margin-bottom: 24px; color: #281b32; background: linear-gradient(145deg,var(--apricot),var(--rose)); border: 6px solid rgba(255,255,255,.12); border-radius: 42% 58% 53% 47%; font: 28px var(--display); box-shadow: 0 24px 50px rgba(239,135,195,.18); }
.expert-profile__avatar { overflow: hidden; }
.expert-profile__avatar img { width: 100%; height: 100%; object-fit: cover; }
.button--wide { width: 100%; }
.memory-item--new { animation: reveal-up .5s cubic-bezier(.2,.75,.2,1) both; }
.member-card.is-selected { border-color: rgba(182,164,255,.46); background: rgba(182,164,255,.1); }
.detail-copy small { color: var(--coral); font-size: 9px; }
.detail-copy h2 { margin: 6px 0 12px; font-family: var(--display); font-size: 32px; font-weight: 400; }
.detail-copy p { color: var(--ink-dim); font-size: 11px; line-height: 1.7; }
.detail-copy ul { display: grid; gap: 8px; padding: 0; list-style: none; }
.detail-copy li { padding: 10px 12px; background: rgba(255,255,255,.04); border-radius: 12px; color: var(--ink-soft); font-size: 10px; }
.expert-detail { text-align: center; }
.expert-detail .expert-face { width: 88px; height: 88px; margin: 0 auto 18px; }
.expert-detail h2 { margin-bottom: 5px; font-family: var(--display); font-size: 34px; font-weight: 400; }
.expert-detail > p { color: var(--ink-dim); font-size: 11px; }
.skill-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 25px 0; }
.skill-cloud span { padding: 9px 12px; color: var(--ink-soft); background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 999px; font-size: 10px; }

.command-palette { position: fixed; z-index: 100; inset: 0; display: grid; place-items: start center; padding-top: min(16vh,150px); }
.command-palette__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; background: rgba(8,5,15,.7); backdrop-filter: blur(12px); }
.command-palette__panel { position: relative; width: min(650px,calc(100% - 26px)); padding: 10px; background: #211a30; border: 1px solid var(--line-strong); border-radius: 24px; box-shadow: 0 50px 120px rgba(4,2,15,.7); animation: palette-enter .35s cubic-bezier(.2,.8,.2,1) both; }
.command-search { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; padding: 8px 10px 14px; border-bottom: 1px solid var(--line); }
.command-search > span { color: var(--lilac); }
.command-search input { width: 100%; padding: 10px 5px; color: var(--ink); background: transparent; border: 0; outline: 0; }
.command-search input::placeholder { color: var(--ink-dim); }
.command-list { display: grid; gap: 3px; padding-top: 7px; }
.command-list button { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; padding: 13px; color: var(--ink); text-align: left; background: transparent; border-radius: 14px; }
.command-list button:hover { background: rgba(255,255,255,.055); }
.command-list button small { grid-column: 1; color: var(--ink-dim); font-size: 9px; }
.command-list button i { grid-column: 2; grid-row: 1 / span 2; color: var(--coral); font-style: normal; }
.toast { position: fixed; z-index: 200; left: 50%; bottom: 25px; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 30px); padding: 11px 16px; color: var(--ink); background: #2b223c; border: 1px solid var(--line-strong); border-radius: 999px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translate(-50%,20px); transition: opacity .25s ease, transform .25s ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%,0); }
.toast span { color: var(--coral); }
.toast p { margin: 0; font-size: 10px; }

/* Readability pass: compact metadata stays quiet, but never microscopic. */
.quick-card small,
.story-card small,
.process-list li > span,
.process-list small,
.analysis-image > span,
.analysis-progress span,
.cover-art__stamp,
.cover-art small,
.result-meta span,
.result-tags span,
.family-overview__head small,
.trust-badge,
.member-card small,
.timeline-list time,
.timeline-list small,
.timeline-list button,
.status-copy,
.expert-card small,
.planner-progress span,
.planner-step button small,
.planner-loading p,
.planner-result__art span,
.planner-result > div:last-child > small,
.detail-tags span,
.detail-steps li,
.detail-copy small,
.detail-copy li,
.skill-cloud span,
.command-list button small,
.toast p { font-size: 12px; }

.process-list b,
.member-card b { font-size: 14px; }

.inspector-note p,
.planner > header p:last-child,
.planner-result p,
.detail-copy,
.detail-copy p,
.expert-detail > p,
.timeline-list p,
.expert-card span { font-size: 14px; line-height: 1.7; }

#uploadTrigger { min-width: 164px; white-space: nowrap; }

.reveal { animation: reveal-up .7s cubic-bezier(.2,.75,.2,1) both; }
.gsap-ready .reveal { animation: none; }
.gsap-ready .view, .gsap-ready .ambient__wash, .gsap-ready .brand__mark i, .gsap-ready .ai-core__halo, .gsap-ready .ai-core__mesh { animation: none; }
.gsap-ready .meal-card, .gsap-ready .story-card, .gsap-ready .expert-card { will-change: transform, opacity; }
.home-grid .pulse-stack { animation-delay: .08s; }
.section-block:nth-of-type(3) { animation-delay: .14s; }
.section-block:nth-of-type(4) { animation-delay: .2s; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }

@keyframes drift-one { to { transform: translate(14vw,10vh) scale(1.1); } }
@keyframes drift-two { to { transform: translate(-10vw,-12vh) scale(.85); } }
@keyframes brand-spin { to { transform: rotate(360deg); } }
@keyframes core-turn { to { transform: rotate(360deg); } }
@keyframes core-pulse { 50% { transform: scale(1.06); opacity: .75; } }
@keyframes orbit-breathe { 50% { opacity: .52; scale: 1.04; } }
@keyframes blink { 0%,44%,48%,100% { transform: scaleY(1); } 46% { transform: scaleY(.1); } }
@keyframes live-dot { 70% { box-shadow: 0 0 0 10px rgba(255,141,123,0),0 0 16px var(--coral); } }
@keyframes typing { to { transform: translateY(-4px); opacity: .5; } }
@keyframes plate-float { 50% { transform: translateY(-9px) rotate(3deg); } }
@keyframes scan { 0%,100% { left: 2%; } 50% { left: 98%; } }
@keyframes progress-load { 50% { width: 78%; } }
@keyframes cover-arrive { from { opacity: 0; transform: translateY(20px) rotate(-2deg); } }
@keyframes page-enter { from { opacity: 0; transform: translateY(10px); } }
@keyframes reveal-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes modal-enter { from { opacity: 0; transform: translateY(24px) scale(.98); } }
@keyframes palette-enter { from { opacity: 0; transform: translateY(-14px) scale(.985); } }

@media (max-width: 1320px) {
  .main-content { padding-inline: 36px; }
  .view-header h1 { font-size: clamp(42px,5vw,64px); }
  .constellation-card { min-height: 560px; }
  .constellation { min-height: 380px; }
  .family-node--self { left: 1%; }
  .family-node--child { right: 0; }
  .family-node--pet { right: 3%; }
  .expert-rail { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 1080px) {
  :root { --rail: 82px; --dock: 380px; }
  .app-shell { grid-template-columns: var(--rail) minmax(0,1fr); }
  .companion-dock { width: min(380px,calc(100% - var(--rail))); }
  .companion-launcher { right: 20px; bottom: 20px; }
  .home-grid { grid-template-columns: 1fr; }
  .pulse-stack { grid-template-columns: repeat(3,1fr); }
  .pulse-card { min-height: 220px; }
  .pulse-card--compact { display: flex; min-height: auto; }
  .discovery-grid { grid-template-columns: repeat(2,1fr); }
  .story-card--tall { grid-row: span 1; }
  .story-card--tall .story-art { min-height: 245px; }
}

@media (max-width: 820px) {
  body { overflow: hidden; }
  .mobile-blocker { display: grid; }
  .app-shell, .skip-link { display: none !important; }
}

@media (max-width: 780px) {
  :root { --rail: 0px; }
  .app-shell { display: block; padding: 70px 0 90px; }
  .nav-rail { display: none; }
  .mobile-header { position: fixed; z-index: 40; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 8px 17px; background: rgba(14,10,26,.72); border-bottom: 1px solid var(--line); backdrop-filter: blur(22px); }
  .brand--mobile { display: flex; width: auto; gap: 4px; }
  .brand--mobile .brand__mark { width: 31px; height: 31px; }
  .mobile-avatar { width: 34px; height: 34px; }
  .mobile-nav { position: fixed; z-index: 45; inset: auto 10px 10px; display: grid; grid-template-columns: repeat(5,1fr); align-items: center; min-height: 68px; padding: 6px; background: rgba(28,21,42,.86); border: 1px solid var(--line-strong); border-radius: 24px; box-shadow: 0 18px 50px rgba(4,2,15,.5); backdrop-filter: blur(22px); }
  .mobile-nav button { display: grid; justify-items: center; gap: 3px; padding: 7px 2px; color: var(--ink-dim); background: transparent; border-radius: 15px; font-size: 9px; }
  .mobile-nav button span { font-size: 16px; }
  .mobile-nav button.is-active { color: var(--ink); background: rgba(255,255,255,.055); }
  .mobile-nav .mobile-nav__core { width: 50px; height: 50px; justify-self: center; align-content: center; padding: 0; color: #241526; background: conic-gradient(var(--coral),var(--apricot),var(--cyan),var(--lilac),var(--coral)); border-radius: 50%; box-shadow: 0 0 28px rgba(182,164,255,.28); }
  .mobile-nav .mobile-nav__core span { font-size: 20px; }
  .main-content { padding: 24px 16px 40px; }
  .view-header { align-items: flex-start; margin-bottom: 25px; }
  .view-header h1 { font-size: clamp(34px,10vw,52px); }
  .header-actions .signal-button { display: none; }
  .home-grid { gap: 12px; }
  .constellation-card { min-height: 600px; padding: 20px 16px; border-radius: 30px; }
  .constellation-card h2 { font-size: 26px; }
  .time-chip { padding: 7px 9px; font-size: 9px; }
  .constellation { min-height: 430px; }
  .orbit--outer { width: 96%; aspect-ratio: 1.5; }
  .orbit--inner { width: 62%; }
  .ai-core { width: 128px; height: 128px; }
  .ai-core__face { inset: 45px 38px 48px; }
  .family-node { min-width: 0; padding-right: 8px; }
  .family-node__avatar { width: 34px; height: 34px; }
  .family-node span:last-child { display: none; }
  .family-node--self { left: 4%; top: 26%; }
  .family-node--child { right: 3%; top: 20%; }
  .family-node--pet { right: 7%; bottom: 18%; }
  .constellation-card__actions { flex-direction: column; }
  .pulse-stack { display: grid; grid-template-columns: 1fr; }
  .pulse-card { min-height: 0; }
  .section-block { margin-top: 50px; }
  .section-heading { align-items: flex-end; }
  .meal-rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: none; }
  .meal-card { flex: 0 0 82%; scroll-snap-align: start; }
  .quick-actions { grid-template-columns: 1fr; }
  .quick-card { min-height: 140px; }
  .discovery-feature { grid-template-columns: 1fr; }
  .discovery-feature__copy { min-height: 350px; background: linear-gradient(rgba(255,213,178,.94),rgba(255,213,178,.82),transparent); }
  .soup-visual { min-height: 280px; }
  .discovery-grid { grid-template-columns: 1fr; }
  .story-card--wide { grid-column: span 1; }
  .studio-layout, .family-dashboard { grid-template-columns: 1fr; }
  .studio-canvas, .studio-empty, .analysis-stage, .studio-result { min-height: 540px; }
  .expert-rail { display: flex; overflow-x: auto; scrollbar-width: none; }
  .expert-card { flex: 0 0 76%; }
  .companion-dock { inset: auto 0 0; width: 100%; height: min(75vh,620px); padding-bottom: 90px; border-left: 0; border-top: 1px solid var(--line); border-radius: 28px 28px 0 0; transform: translateY(110%); }
  .companion-dock.is-open { transform: translateY(0); }
  .companion-launcher { right: 16px; bottom: 88px; }
  .planner-result { grid-template-columns: 1fr; }
  .planner-result__art { min-height: 260px; }
  .modal { max-height: calc(100vh - 18px); border-radius: 28px; }
  .planner { min-height: 610px; padding: 46px 22px 30px; }
  #detailContent { padding: 48px 22px 25px; }
}

@media (max-width: 480px) {
  .view-header { display: block; }
  .view-header .header-actions, .view-header > .segmented, .view-header > .primary-action, .view-header > .secondary-action { margin-top: 17px; }
  .view-header h1 { font-size: 40px; }
  .constellation-card__top { align-items: flex-start; }
  .constellation-card__top .micro-label { margin-right: -70px; }
  .constellation-card__top h2 { max-width: 190px; }
  .meal-card { flex-basis: 88%; }
  .discovery-feature__copy { padding: 28px 23px; }
  .discovery-feature__copy h2 { font-size: 37px; }
  .studio-empty > div:last-child { flex-direction: column; width: 100%; }
  .family-overview, .memory-timeline, .expert-section { padding: 20px; }
  .trust-badge { display: none; }
  .modal { width: calc(100% - 16px); }
}

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