:root {
      color-scheme: dark;
      --ink: #f7f6ff;
      --muted: #aeb8d0;
      --dim: #7985a4;
      --cyan: #8ee9ff;
      --violet: #b8a2ff;
      --gold: #ffd696;
      --panel: rgba(5, 11, 28, .83);
      --line: rgba(173, 203, 255, .18);
      --line-strong: rgba(173, 203, 255, .35);
      --shadow: 0 30px 80px rgba(0, 0, 0, .45);
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; min-height: 100%; background: #020714; color: var(--ink); }
    body {
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      min-height: 100vh;
      overflow-x: hidden;
    }
    button, input, select { font: inherit; }
    button { color: inherit; }

    .backdrop {
      position: fixed;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(1, 5, 16, .96) 0%, rgba(2, 7, 20, .76) 43%, rgba(2, 7, 20, .24) 100%),
        linear-gradient(0deg, rgba(2, 7, 20, .88) 0%, transparent 46%),
        url("assets/living-constellation-hero.png") center / cover no-repeat;
      transform: scale(1.02);
      filter: saturate(.9) contrast(1.03);
      z-index: -2;
    }
    .backdrop::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 72% 38%, transparent 0 20%, rgba(2, 7, 20, .28) 70%);
    }

    .app {
      width: min(1500px, 100%);
      min-height: 100vh;
      margin: 0 auto;
      padding: 22px clamp(18px, 4vw, 64px) 28px;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 22px;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .brand-mark {
      width: 30px;
      height: 30px;
      flex: 0 0 auto;
      transform: rotate(45deg);
      border: 1px solid rgba(180, 233, 255, .72);
      background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(142,233,255,.3) 42%, rgba(184,162,255,.48));
      box-shadow: 0 0 28px rgba(142,233,255,.45), inset 0 0 12px rgba(255,255,255,.5);
    }
    .brand-name {
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(1rem, 1.6vw, 1.22rem);
      letter-spacing: .08em;
      text-transform: uppercase;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .prototype-badge {
      color: var(--muted);
      border: 1px solid var(--line);
      background: rgba(3, 9, 24, .65);
      border-radius: 999px;
      padding: 8px 12px;
      font-size: .78rem;
      letter-spacing: .04em;
      white-space: nowrap;
    }
    .language-switch {
      color: var(--ink);
      text-decoration: none;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 8px 11px;
      font-size: .78rem;
      font-weight: 750;
      letter-spacing: .08em;
      background: rgba(3, 9, 24, .65);
    }
    .language-switch:hover { border-color: var(--cyan); }

    .workspace {
      display: grid;
      grid-template-columns: minmax(390px, 600px) minmax(360px, 1fr);
      gap: clamp(18px, 3vw, 42px);
      min-height: 0;
      align-items: stretch;
    }

    .panel {
      align-self: center;
      border: 1px solid var(--line);
      border-radius: 28px;
      background: linear-gradient(145deg, rgba(8, 16, 39, .9), rgba(3, 9, 23, .76));
      backdrop-filter: blur(22px);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .panel-inner { padding: clamp(26px, 4vw, 52px); }

    .chapter {
      margin: 0 0 18px;
      color: var(--cyan);
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    h1 {
      margin: 0;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2.35rem, 5vw, 5.4rem);
      line-height: .98;
      font-weight: 400;
      letter-spacing: -.045em;
      text-wrap: balance;
    }
    h2 {
      margin: 0;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2rem, 4vw, 3.7rem);
      line-height: 1.02;
      font-weight: 400;
      letter-spacing: -.035em;
      text-wrap: balance;
    }
    .lead {
      max-width: 52ch;
      margin: 22px 0 0;
      color: var(--muted);
      font-size: clamp(1rem, 1.5vw, 1.16rem);
      line-height: 1.65;
    }
    .truth {
      margin: 22px 0 0;
      padding: 14px 16px;
      color: #dce7ff;
      background: rgba(127, 184, 255, .07);
      border-left: 2px solid var(--cyan);
      font-size: .94rem;
      line-height: 1.55;
    }

    .actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 11px;
      margin-top: 30px;
    }
    .btn {
      min-height: 48px;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      padding: 0 21px;
      cursor: pointer;
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }
    .btn:hover { transform: translateY(-2px); border-color: rgba(203, 235, 255, .65); }
    .btn:focus-visible, .chip:focus-visible, .reward:focus-visible, input:focus-visible, select:focus-visible {
      outline: 3px solid rgba(142, 233, 255, .45);
      outline-offset: 3px;
    }
    .btn-primary {
      color: #061020;
      border-color: transparent;
      background: linear-gradient(115deg, #f8fbff, #9deaff 54%, #ccbaff);
      font-weight: 750;
      box-shadow: 0 10px 34px rgba(115, 210, 255, .2);
    }
    .btn-secondary { background: rgba(255,255,255,.045); }
    .btn-quiet { border-color: transparent; background: transparent; color: var(--muted); padding-inline: 8px; }
    .btn[disabled] { opacity: .38; cursor: not-allowed; transform: none; }

    .progress-area { padding: 0 10px 15px; }
    .progress-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--dim); font-size: .76rem; }
    .progress-track { height: 2px; margin-top: 10px; background: rgba(255,255,255,.09); overflow: hidden; }
    .progress-fill { width: 8%; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--violet), var(--gold)); transition: width .45s ease; }

    .stage {
      min-height: 620px;
      display: grid;
      place-items: center;
      position: relative;
      border-radius: 28px;
      overflow: hidden;
      border: 1px solid rgba(169, 215, 255, .12);
      background:
        linear-gradient(180deg, rgba(3, 8, 23, .1), rgba(2, 7, 20, .72)),
        url("assets/living-constellation-hero.png") center / cover no-repeat;
      box-shadow: var(--shadow);
      isolation: isolate;
    }
    .stage::after {
      content: "";
      position: absolute;
      inset: 0;
      box-shadow: inset 0 0 100px rgba(0,0,0,.52);
      pointer-events: none;
      z-index: 5;
    }
    .stage-caption {
      position: absolute;
      left: 22px;
      right: 22px;
      bottom: 20px;
      z-index: 7;
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 18px;
      color: rgba(232, 241, 255, .72);
      font-size: .78rem;
    }
    .stage-mode { text-align: right; color: var(--cyan); }

    .presence-wrap { position: relative; z-index: 2; display: grid; place-items: center; width: 260px; height: 260px; }
    .presence-aura {
      position: absolute;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(151, 226, 255, .2), rgba(160, 143, 255, .08) 45%, transparent 70%);
      animation: breathe 3.8s ease-in-out infinite;
    }
    .presence {
      width: 74px;
      height: 112px;
      clip-path: polygon(50% 0, 88% 28%, 74% 78%, 50% 100%, 22% 78%, 10% 29%);
      background: linear-gradient(145deg, #ffffff 0%, #a6edff 23%, #6578d8 58%, #d9bdff 77%, #fff4d0 100%);
      box-shadow: 0 0 70px rgba(137, 225, 255, .7);
      filter: drop-shadow(0 0 24px rgba(176, 220, 255, .9));
      animation: float 5s ease-in-out infinite;
    }
    .presence-name { position: absolute; top: calc(50% + 78px); color: white; font-size: .88rem; letter-spacing: .08em; }
    .rings { position: absolute; inset: 0; pointer-events: none; }
    .ring { position: absolute; inset: 36px; border: 1px solid rgba(164, 225, 255, .24); border-radius: 50%; animation: spin 16s linear infinite; }
    .ring:nth-child(2) { inset: 18px 54px; transform: rotate(64deg); border-color: rgba(205, 180, 255, .22); animation-duration: 23s; }
    .ring:nth-child(3) { inset: 62px 12px; transform: rotate(-28deg); border-color: rgba(255, 214, 150, .22); animation-duration: 31s; }

    .mode-card {
      position: absolute;
      top: 26px;
      right: 26px;
      z-index: 8;
      max-width: 230px;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(3, 9, 24, .72);
      backdrop-filter: blur(12px);
      color: var(--muted);
      font-size: .82rem;
      line-height: 1.45;
    }
    .mode-card strong { color: white; display: block; margin-bottom: 3px; }

    .reward-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 24px; }
    .reward {
      text-align: left;
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 15px;
      background: rgba(255,255,255,.03);
      cursor: pointer;
      transition: border .18s ease, background .18s ease, transform .18s ease;
    }
    .reward:hover { transform: translateY(-2px); border-color: rgba(157, 234, 255, .48); }
    .reward.selected { border-color: var(--cyan); background: rgba(118, 218, 255, .1); box-shadow: inset 0 0 0 1px rgba(142,233,255,.12); }
    .reward-price { font-size: 1.4rem; font-weight: 750; }
    .reward-name { margin-top: 3px; color: white; font-weight: 650; }
    .reward-detail { margin-top: 7px; color: var(--muted); font-size: .78rem; line-height: 1.4; }
    .reward-wide { grid-column: span 2; }
    .limited { color: var(--gold); font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; }

    .fields { display: grid; gap: 14px; margin-top: 26px; }
    .field { display: grid; gap: 7px; }
    label { color: #dce5f8; font-size: .86rem; }
    input, select {
      width: 100%;
      min-height: 48px;
      border-radius: 13px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.045);
      color: white;
      padding: 0 14px;
    }
    input::placeholder { color: #6f7d9d; }
    .field-note { color: var(--dim); font-size: .75rem; line-height: 1.4; }

    .resonance-groups { display: grid; gap: 18px; margin-top: 24px; }
    .resonance-title { color: #e6edff; font-size: .88rem; margin-bottom: 9px; }
    .chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .chip {
      min-height: 38px;
      padding: 0 13px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.035);
      cursor: pointer;
      color: var(--muted);
      font-size: .83rem;
    }
    .chip.selected { color: #061020; background: var(--cyan); border-color: var(--cyan); font-weight: 700; }

    .summary-card, .invitation {
      margin-top: 22px;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: linear-gradient(145deg, rgba(143, 216, 255, .08), rgba(188, 160, 255, .04));
    }
    .summary-row { display: flex; justify-content: space-between; gap: 18px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.07); color: var(--muted); }
    .summary-row:last-child { border-bottom: 0; }
    .summary-row strong { color: white; text-align: right; }

    .relationship-line {
      position: absolute;
      z-index: 4;
      width: min(54%, 430px);
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(184, 236, 255, .9), rgba(255, 216, 151, .9), transparent);
      box-shadow: 0 0 14px rgba(142,233,255,.7);
      transform: rotate(-11deg);
      animation: draw 2.1s ease both;
    }
    .connected-light {
      position: absolute;
      z-index: 3;
      width: 34px;
      height: 52px;
      clip-path: polygon(50% 0, 90% 35%, 68% 100%, 30% 100%, 8% 35%);
      background: linear-gradient(145deg, white, #ffd898 45%, #b784ff);
      filter: drop-shadow(0 0 17px rgba(255,213,148,.9));
    }
    .connected-light.left { left: 22%; top: 57%; }
    .connected-light.right { right: 19%; top: 36%; }

    .resonance-pulse {
      position: absolute;
      z-index: 2;
      width: 120px;
      height: 120px;
      border: 1px solid rgba(146, 237, 255, .75);
      border-radius: 50%;
      animation: ripple 2.6s ease-out infinite;
    }

    .stage { --tone-a: #a6edff; --tone-b: #7b83e8; --tone-c: #e1c2ff; }
    .stage.personalized .presence { background: linear-gradient(145deg,#fff 0%,var(--tone-a) 25%,var(--tone-b) 59%,var(--tone-c) 82%,#fff5d7 100%); filter: drop-shadow(0 0 28px var(--tone-a)); }
    .stage.personalized .presence-aura { background: radial-gradient(circle,color-mix(in srgb,var(--tone-a) 32%,transparent),color-mix(in srgb,var(--tone-c) 13%,transparent) 46%,transparent 72%); }
    .word-orbit { position:absolute; inset:0; z-index:3; pointer-events:none; }
    .word-orbit span { position:absolute; padding:6px 10px; border:1px solid rgba(205,231,255,.28); border-radius:999px; background:rgba(3,9,24,.76); color:#eef8ff; font-size:.73rem; box-shadow:0 0 24px color-mix(in srgb,var(--tone-a) 25%,transparent); animation:wordIn .8s ease both; }
    .word-orbit span:nth-child(1){left:4%;top:22%}.word-orbit span:nth-child(2){right:1%;top:42%;animation-delay:.15s}.word-orbit span:nth-child(3){left:18%;bottom:4%;animation-delay:.3s}
    .duo-scene { position:relative; z-index:3; width:min(520px,82%); height:330px; }
    .duo-light { position:absolute; top:42%; width:68px; height:102px; clip-path:polygon(50% 0,88% 28%,74% 78%,50% 100%,22% 78%,10% 29%); filter:drop-shadow(0 0 28px var(--tone-a)); }
    .duo-light.first { left:13%; background:linear-gradient(145deg,#fff,var(--tone-a) 25%,var(--tone-b) 62%,var(--tone-c)); }
    .duo-light.second { right:13%; background:linear-gradient(145deg,#fff,#ffdca7 26%,#d39bff 62%,#8fe7ff); }
    .duo-name { position:absolute; top:76%; color:#fff; font-size:.8rem; letter-spacing:.06em; transform:translateX(-50%); }
    .duo-name.first{left:19%}.duo-name.second{left:81%}
    .bond-line { position:absolute; left:22%; right:22%; top:57%; height:2px; transform:rotate(-4deg); background:linear-gradient(90deg,var(--tone-a),#fff4c6,#d7a9ff); box-shadow:0 0 22px rgba(170,225,255,.9); animation:bondBirth 2.2s ease both; }
    .bond-heart { position:absolute; left:50%; top:51%; width:54px; height:54px; transform:translate(-50%,-50%) rotate(45deg); border:1px solid rgba(230,244,255,.72); background:linear-gradient(145deg,rgba(255,255,255,.82),color-mix(in srgb,var(--tone-a) 50%,transparent),rgba(202,163,255,.55)); box-shadow:0 0 42px var(--tone-a); animation:formBirth 2.2s .55s ease both; }
    .spotlight { position:absolute; inset:0; z-index:1; background:radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--tone-a) 24%,transparent),transparent 25%); animation:breathe 4s ease-in-out infinite; }
    .world-signature { position:absolute; z-index:4; width:210px; height:130px; border:1px solid color-mix(in srgb,var(--tone-a) 55%,transparent); border-radius:50%; box-shadow:0 0 48px color-mix(in srgb,var(--tone-a) 25%,transparent),inset 0 0 28px rgba(196,180,255,.12); }
    .world-signature::before,.world-signature::after{content:"";position:absolute;top:50%;width:25px;height:38px;clip-path:polygon(50% 0,88% 28%,74% 78%,50% 100%,22% 78%,10% 29%);background:linear-gradient(145deg,#fff,var(--tone-a),var(--tone-b));filter:drop-shadow(0 0 12px var(--tone-a));transform:translateY(-50%)}
    .world-signature::before{left:35px}.world-signature::after{right:35px;background:linear-gradient(145deg,#fff,#ffdca7,#d39bff)}
    .world-signature span{position:absolute;left:63px;right:63px;top:50%;height:1px;background:linear-gradient(90deg,var(--tone-a),#fff3c9,#d8a8ff);box-shadow:0 0 10px var(--tone-a)}
    .deliverables{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px}.deliverable{min-height:150px;padding:15px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(145deg,rgba(142,233,255,.07),rgba(184,162,255,.04))}.deliverable-visual{height:58px;display:grid;place-items:center;margin-bottom:9px;border-radius:12px;background:radial-gradient(circle,rgba(142,233,255,.19),transparent 64%);color:var(--cyan);font-family:Georgia,serif;font-size:1.6rem}.deliverable strong{display:block;font-size:.86rem}.deliverable p{margin:6px 0 0;color:var(--muted);font-size:.72rem;line-height:1.4}
    .funding-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}.funding-item{padding:14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03)}.funding-item strong{display:block;font-size:.86rem}.funding-item span{display:block;margin-top:5px;color:var(--muted);font-size:.74rem;line-height:1.4}.test-note{margin-top:18px;padding:13px 15px;border-radius:14px;border:1px solid rgba(255,214,150,.25);background:rgba(255,214,150,.06);color:#f5e6c9;font-size:.8rem;line-height:1.45}
    @keyframes wordIn{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:none}}@keyframes bondBirth{from{opacity:0;transform:rotate(-4deg) scaleX(0)}to{opacity:1;transform:rotate(-4deg) scaleX(1)}}@keyframes formBirth{from{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(.15)}to{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(1)}}

    /* V0.6 — the foreground now speaks the same crystalline language as the artwork. */
    .crystal { position: relative; width: 92px; height: 118px; filter: drop-shadow(0 0 18px color-mix(in srgb,var(--tone-a) 85%,transparent)) drop-shadow(0 0 42px color-mix(in srgb,var(--tone-b) 45%,transparent)); animation: crystalFloat 5.2s ease-in-out infinite; }
    .crystal::before { content:""; position:absolute; inset:9% 7% 5%; clip-path:polygon(49% 0,88% 25%,100% 63%,66% 100%,28% 89%,0 48%,17% 14%); border:1px solid rgba(225,245,255,.7); background:linear-gradient(138deg,rgba(255,255,255,.5),color-mix(in srgb,var(--tone-a) 43%,transparent) 45%,color-mix(in srgb,var(--tone-b) 38%,transparent)); box-shadow:inset 0 0 26px rgba(255,255,255,.24); }
    .facet { position:absolute; display:block; z-index:2; }
    .facet-one { inset:9% 40% 42% 7%; clip-path:polygon(78% 0,100% 100%,0 72%,32% 18%); background:linear-gradient(145deg,#fff,rgba(144,238,255,.7) 46%,rgba(88,113,211,.22)); }
    .facet-two { inset:9% 5% 37% 47%; clip-path:polygon(6% 0,82% 29%,100% 100%,0 84%); background:linear-gradient(150deg,rgba(255,255,255,.92),color-mix(in srgb,var(--tone-c) 72%,transparent) 58%,rgba(80,70,177,.2)); }
    .facet-three { inset:43% 35% 4% 20%; clip-path:polygon(0 0,100% 14%,78% 100%,17% 77%); background:linear-gradient(150deg,color-mix(in srgb,var(--tone-a) 75%,#fff),color-mix(in srgb,var(--tone-b) 75%,transparent) 66%,rgba(255,218,157,.62)); }
    .facet-four { inset:47% 5% 8% 50%; clip-path:polygon(0 0,100% 14%,43% 100%,0 87%); background:linear-gradient(140deg,rgba(255,255,255,.72),color-mix(in srgb,var(--tone-c) 75%,transparent),rgba(255,213,149,.45)); }
    .crystal-star { position:absolute; z-index:4; left:48%; top:44%; width:7px; height:7px; border-radius:50%; background:white; box-shadow:0 0 7px 3px #fff,0 0 25px 9px var(--tone-a); animation:starPulse 2.8s ease-in-out infinite; }
    .satellite { position:absolute; z-index:4; width:4px; height:4px; border-radius:50%; background:#effcff; box-shadow:0 0 9px 3px var(--tone-a); }
    .satellite::after { content:""; position:absolute; width:18px; height:1px; right:2px; top:1px; transform-origin:right; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--tone-a) 60%,transparent)); }
    .satellite.s1{left:3%;top:23%}.satellite.s2{right:-3%;top:39%}.satellite.s2::after{right:auto;left:2px}.satellite.s3{left:19%;bottom:1%}
    .presence-crystal { transform:scale(1.08); }
    .stage.personalized .presence-crystal { filter:drop-shadow(0 0 23px var(--tone-a)) drop-shadow(0 0 55px color-mix(in srgb,var(--tone-b) 58%,transparent)); }

    .constellation-link { position:relative; z-index:4; width:min(630px,92%); height:390px; }
    .link-glow { position:absolute; inset:15% 7%; background:radial-gradient(ellipse,color-mix(in srgb,var(--tone-a) 14%,transparent),transparent 65%); filter:blur(10px); animation:breathe 4.5s ease-in-out infinite; }
    .filament-map { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
    .filament { fill:none; stroke:url(#filament); stroke-width:1.4; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 5px var(--tone-a)); stroke-dasharray:720; stroke-dashoffset:720; animation:filamentDraw 2.4s cubic-bezier(.2,.75,.2,1) forwards; }
    .filament.whisper { stroke-width:.65; opacity:.45; animation-delay:.35s; }
    .filament.whisper.two { opacity:.27; animation-delay:.7s; }
    .link-nodes circle { fill:#fff; stroke:var(--tone-a); stroke-width:1; filter:drop-shadow(0 0 7px var(--tone-a)); opacity:0; animation:nodeBirth .55s 1.6s ease forwards; }
    .link-presence { position:absolute; z-index:5; top:39%; }
    .link-presence.first{left:13%}.link-presence.second{right:12%;top:23%}
    .crystal-small { width:70px; height:94px; }
    .crystal.warm { --tone-a:#ffd9a3; --tone-b:#b178ef; --tone-c:#8fe8ff; }
    .shared-seed { position:absolute; z-index:6; left:50%; top:48%; width:68px; height:68px; transform:translate(-50%,-50%); filter:drop-shadow(0 0 22px var(--tone-a)); animation:seedBirth 2.5s .75s cubic-bezier(.2,.9,.2,1) both; }
    .shared-seed i { position:absolute; left:27px; top:4px; width:18px; height:54px; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); background:linear-gradient(#fff,var(--tone-a),rgba(186,142,255,.6)); transform-origin:50% 30px; }
    .shared-seed i:nth-child(2){transform:rotate(60deg)}.shared-seed i:nth-child(3){transform:rotate(120deg)}
    .shared-seed b { position:absolute; left:30px; top:27px; width:11px; height:11px; border-radius:50%; background:#fff; box-shadow:0 0 11px 5px #fff,0 0 32px 13px var(--tone-a); }
    .constellation-link .duo-name { top:74%; }
    .constellation-link .duo-name.first{left:19%}.constellation-link .duo-name.second{left:81%}

    .pending-constellation { position:relative; z-index:4; width:min(610px,90%); height:390px; }
    .pending-presence { position:absolute; top:39%; z-index:3; opacity:.9; }
    .pending-presence.first{left:13%}.pending-presence.second{right:12%;top:23%}
    .pending-space { position:absolute; left:29%; right:29%; top:50%; text-align:center; color:rgba(224,235,255,.58); }
    .pending-space span { display:block; height:1px; background:repeating-linear-gradient(90deg,rgba(184,218,255,.22) 0 3px,transparent 3px 10px); }
    .pending-space b { display:inline-block; margin-top:13px; font-size:.7rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
    .pending-constellation .duo-name { top:74%; }
    .pending-constellation .duo-name.first{left:19%}.pending-constellation .duo-name.second{left:81%}

    .resonance-field { position:relative; z-index:3; width:min(650px,96%); height:500px; }
    .resonance-field>svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
    .resonance-field>svg path { fill:none; stroke:color-mix(in srgb,var(--tone-a) 46%,transparent); stroke-width:.7; stroke-dasharray:3 10; filter:drop-shadow(0 0 4px var(--tone-a)); animation:resonanceWeb 4s ease-in-out infinite; }
    .resonance-field>svg circle { fill:#fff; stroke:var(--tone-a); stroke-width:2; filter:drop-shadow(0 0 9px var(--tone-a)); animation:echoPulse 3s ease-in-out infinite; }
    .resonance-center { position:absolute; left:50%; top:51%; transform:translate(-50%,-50%) scale(.76); }
    .resonance-center .presence-wrap { width:270px; height:270px; }
    .resonance-center .word-orbit { display:none; }
    .echo { position:absolute; opacity:.78; }
    .echo.e1{left:10%;top:12%}.echo.e2{right:7%;top:27%}.echo.e3{right:11%;bottom:12%}
    .crystal-tiny { width:27px; height:38px; filter:drop-shadow(0 0 10px var(--tone-a)); animation:echoPulse 3.2s ease-in-out infinite; }
    .crystal-tiny .satellite,.crystal-tiny .crystal-star{display:none}
    .resonance-word { position:absolute; left:50%; bottom:6%; transform:translateX(-50%); padding:7px 14px; border:1px solid color-mix(in srgb,var(--tone-a) 40%,transparent); border-radius:999px; background:rgba(3,9,24,.72); color:#fff; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; box-shadow:0 0 28px color-mix(in srgb,var(--tone-a) 20%,transparent); }

    .world-cluster { position:relative; z-index:3; width:min(680px,95%); height:500px; transform:scale(.82); }
    .world-cluster>.constellation-link { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.72); }
    .solo-signature { position:absolute; z-index:3; left:50%; top:50%; display:grid; place-items:center; transform:translate(-50%,-50%); }
    .solo-signature span { margin-top:18px; color:#fff; font-size:.78rem; letter-spacing:.08em; }
    .cluster-halo { position:absolute; inset:15%; border:1px solid color-mix(in srgb,var(--tone-a) 25%,transparent); border-radius:50%; box-shadow:0 0 70px color-mix(in srgb,var(--tone-a) 22%,transparent),inset 0 0 70px color-mix(in srgb,var(--tone-c) 9%,transparent); animation:breathe 5s ease-in-out infinite; }
    .field-star { position:absolute; width:5px; height:5px; border-radius:50%; background:#fff; box-shadow:0 0 10px var(--tone-a); opacity:.72; }
    .field-star.f1{left:7%;top:21%}.field-star.f2{right:9%;top:12%}.field-star.f3{right:4%;bottom:19%}.field-star.f4{left:13%;bottom:8%}.field-star.f5{left:47%;top:4%}

    .share-card { position:relative; min-height:340px; margin-top:24px; padding:20px; overflow:hidden; border:1px solid rgba(190,225,255,.32); border-radius:22px; background:linear-gradient(150deg,rgba(11,23,55,.98),rgba(15,8,38,.96)),url("assets/living-constellation-hero.png") center/cover; box-shadow:0 22px 60px rgba(0,0,0,.34),inset 0 0 70px rgba(120,188,255,.08); }
    .share-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 52% 40%,color-mix(in srgb,var(--tone-a) 18%,transparent),transparent 50%),linear-gradient(180deg,transparent 48%,rgba(1,5,17,.88)); pointer-events:none; }
    .share-card-kicker,.share-card-mark,.share-card-copy { position:relative; z-index:3; }
    .share-card-kicker { color:rgba(230,241,255,.65); font-size:.62rem; letter-spacing:.17em; }
    .share-art { position:absolute; z-index:2; inset:15px 8px 84px; display:grid; place-items:center; transform:scale(.64); }
    .share-art .constellation-link { width:520px; height:300px; }
    .share-art .constellation-link .duo-name { display:none; }
    .share-art .crystal { filter:drop-shadow(0 0 22px var(--tone-a)) drop-shadow(0 0 45px color-mix(in srgb,var(--tone-c) 55%,transparent)) brightness(1.22) saturate(1.08); }
    .share-art>.crystal { width:112px; height:142px; margin-top:25px; }
    .share-card-copy { position:absolute; left:20px; right:20px; bottom:34px; }
    .share-card-copy strong { display:block; font-family:Georgia,serif; font-size:1.2rem; font-weight:400; }
    .share-card-copy span { display:block; margin-top:4px; color:var(--tone-a); font-size:.68rem; }
    .share-card-copy p { margin:6px 0 0; color:rgba(231,239,255,.72); font-size:.72rem; }
    .share-card-mark { position:absolute; right:18px; bottom:12px; color:rgba(232,242,255,.55); font-size:.62rem; }
    .keepsakes { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
    .keepsakes span { padding:7px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:.7rem; background:rgba(255,255,255,.025); }

    @keyframes crystalFloat{50%{transform:translateY(-7px) rotate(1deg)}}
    @keyframes starPulse{50%{opacity:.65;transform:scale(.72)}}
    @keyframes filamentDraw{to{stroke-dashoffset:0}}
    @keyframes nodeBirth{to{opacity:1}}
    @keyframes seedBirth{from{opacity:0;transform:translate(-50%,-50%) scale(.08) rotate(-45deg)}to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}}
    @keyframes echoPulse{50%{opacity:.35;transform:scale(.82)}}
    @keyframes resonanceWeb{50%{opacity:.35}}

    .tiny-note { margin-top: 16px; color: var(--dim); font-size: .74rem; line-height: 1.45; }
    .screen-error { color: #ffb6b6; font-size: .82rem; margin-top: 10px; min-height: 1.2em; }

    @keyframes breathe { 50% { transform: scale(1.12); opacity: .68; } }
    @keyframes float { 50% { transform: translateY(-10px) rotate(1.5deg); } }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes draw { from { opacity: 0; transform: rotate(-11deg) scaleX(0); } to { opacity: 1; transform: rotate(-11deg) scaleX(1); } }
    @keyframes ripple { from { transform: scale(.2); opacity: .95; } to { transform: scale(4.3); opacity: 0; } }

    @media (max-width: 960px) {
      body { overflow: auto; }
      .workspace { grid-template-columns: 1fr; }
      .panel { order: 1; }
      .stage { order: 0; min-height: 46vh; }
      .app { min-height: 100%; }
      .prototype-badge { display: none; }
      h1 { font-size: clamp(2.7rem, 10vw, 4.5rem); }
    }
    @media (max-width: 600px) {
      .app { padding-inline: 12px; }
      .topbar { padding: 5px 5px 0; }
      .stage { min-height: 390px; border-radius: 22px; }
      .panel { border-radius: 22px; }
      .panel-inner { padding: 24px 20px; }
      .reward-grid { grid-template-columns: 1fr; }
      .reward-wide { grid-column: span 1; }
      .actions .btn { flex: 1 1 auto; }
      .mode-card { top: 14px; right: 14px; max-width: 190px; }
      .deliverables,.funding-grid { grid-template-columns:1fr; }
      .duo-scene { transform:scale(.83); }
      .constellation-link { transform:scale(.76); width:125%; }
      .pending-constellation { transform:scale(.78); width:120%; }
      .world-cluster>.constellation-link { transform:translate(-50%,-50%) scale(.58); }
      .resonance-field { transform:scale(.83); width:118%; }
      .share-card { min-height:320px; }
      .share-art { transform:scale(.52); }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
    }
  
/* V0.7 — a single living medium, from the personal to the collective. */
:root{--ink:#f2eee6;--muted:#b3c1ca;--dim:#8a9ba9;--cyan:#b9dfe2;--gold:#e1c697;--line:rgba(179,202,211,.16)}
.backdrop{background:radial-gradient(ellipse at 65% 25%,#12212b 0,transparent 65%),#060b13;transform:none;filter:none}
.app{width:min(1760px,100%);padding:24px 3.3vw 22px;gap:28px}
.brand-name{font-size:15px;letter-spacing:.1em}
.brand-mark{width:21px;height:21px;background:none;box-shadow:0 0 18px #a2dcdf33;border-color:#cbded1}
.workspace{grid-template-columns:minmax(320px,.83fr) minmax(0,1.35fr);gap:3vw;align-items:center}
.panel{border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;overflow:visible}
.panel-inner{padding:25px 8px 28px}
h1{font-size:clamp(2.8rem,4.8vw,5.7rem);line-height:1.02}
h2{font-size:clamp(2.15rem,3.45vw,4rem);line-height:1.04}
.chapter{font-size:10px;letter-spacing:.18em;color:#d6c39d;margin-bottom:23px}
.lead{font-size:15px;line-height:1.7;margin-top:24px}
.truth{background:transparent;border-left:1px solid #857450;padding:2px 0 2px 17px;color:#aebcc8;font-size:13px}
.btn{border-radius:6px;padding:12px 18px;min-height:46px;font-size:13px;line-height:1.45}
.btn-primary{background:#e8d8b8;box-shadow:none;color:#17242a;border-color:#e8d8b8}
.btn-primary:hover{background:#f5e9ce}
.actions{gap:10px;margin-top:25px}
.progress-area{padding:0 8px 12px}
.progress-fill{background:#dbc599}
.stage{height:min(78vh,860px);min-height:560px;background:#040a14;box-shadow:0 20px 80px #0004;border:1px solid #6d9aac24;border-radius:4px;position:relative;width:100%;isolation:isolate}
.stage::after{box-shadow:inset 0 0 75px #03091277;z-index:1}
.artwork-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.mode-card{top:24px;left:24px;right:auto;padding:0;max-width:300px;background:none;backdrop-filter:none;border:0;font-size:10px;color:#8193a3;line-height:1.5;pointer-events:none}
.stage-caption{bottom:22px;left:24px;right:24px;display:flex;flex-direction:column-reverse;align-items:flex-start;gap:8px;font-size:9px;color:#8394a3;pointer-events:none}
.stage-mode{font-family:Georgia,serif;font-size:23px;color:#e8dcc5;text-align:left}
.fields{gap:14px;margin-top:22px}.field label{font-size:12px}.field-note{font-size:11px}
input,select{border-radius:5px!important;background:#0c1722!important;min-height:43px}
.chip{border-radius:5px;font-size:12px;padding:10px 13px;min-height:42px}.chip.selected{background:#b8d7d619;border-color:#b8d7d6;color:#e4f2ec;box-shadow:none}
.resonance-groups{gap:20px}.resonance-title{font-size:13px}.tiny-note{font-size:11px;line-height:1.6;color:#8d9eaa}
.summary-card,.invitation{border-radius:6px;background:#b4c9d405}.summary-row{font-size:12px}
.group-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:25px 0 12px}.group-picker .chip{font-family:Georgia,serif;font-size:27px;padding:12px 3px}.group-picker span{display:block;font-family:system-ui;font-size:10px;margin-top:8px}
.explore-controls{display:grid;gap:10px;margin-top:25px}.explore-controls button{text-align:left}
.keepsake-preview{margin:24px 0 0}.keepsake-preview img{display:block;width:180px;max-width:100%;border:1px solid #d1bb872d;border-radius:2px;box-shadow:0 15px 30px #0005}
.funding-grid{gap:10px}.funding-item{padding:14px;border-radius:5px}.funding-item strong{font-size:12px}.funding-item span{font-size:12px}.test-note{font-size:12px;line-height:1.6}
@media(max-width:1100px) and (min-width:801px){.app{padding-inline:25px}.workspace{grid-template-columns:.95fr 1.1fr;gap:25px}.stage{min-height:560px}h1{font-size:48px}h2{font-size:38px}.prototype-badge{font-size:10px}}
@media(max-width:800px){
 .app{padding:18px 20px 24px;gap:8px}.topbar{flex-wrap:wrap;gap:13px}.brand-name{font-size:11px;letter-spacing:.09em}.brand-mark{width:17px;height:17px}.topbar>div:last-child{width:100%;justify-content:space-between;flex-direction:row-reverse}.prototype-badge{font-size:10px;padding:5px 0;border:0;background:none}.language-switch{padding:6px 9px;font-size:10px}
 .workspace{display:block}.panel{order:0}.panel-inner{padding:22px 0 25px}h1{font-size:43px;line-height:1.05}h2{font-size:35px;line-height:1.08}.chapter{font-size:9px;margin-bottom:18px}.lead{font-size:14px;line-height:1.65;margin-top:18px}.truth{margin-top:18px;font-size:12px}.actions{margin-top:20px}.btn{font-size:12px}.actions .btn-primary{flex:1 1 180px}.stage{min-height:0;height:370px;margin:23px 0;width:100%;order:0;border-radius:3px}.stage[data-mode=world],.stage[data-mode=signature]{height:400px}.mode-card{top:14px;left:15px;right:15px;font-size:9px;max-width:250px}.stage-caption{left:15px;right:15px;bottom:15px;font-size:8px}.stage-mode{font-size:19px}.stage::after{box-shadow:inset 0 0 30px #02071555}.group-picker{margin-top:16px}.keepsake-preview{display:none}.progress-area{padding-inline:0}.fields{grid-template-columns:1fr 1fr}.field:first-child,.field:nth-child(2),.field:last-child{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

@media(max-width:800px){.prototype-badge{display:block!important}.stage[data-step="2"],.stage[data-step="3"],.stage[data-step="6"]{height:215px}.stage[data-step="2"] .stage-caption,.stage[data-step="3"] .stage-caption,.stage[data-step="6"] .stage-caption{display:none}.stage[data-step="2"] .mode-card,.stage[data-step="3"] .mode-card,.stage[data-step="6"] .mode-card{font-size:8px;max-width:210px}}

.actions a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}

/* V0.8 — glass breaths, with readable controls and an unfolding inside the journey. */
.backdrop{background:radial-gradient(ellipse at 70% 25%,#10202c 0,transparent 60%),#050a12}
.stage{background:#040a14;min-height:600px}
.lead{font-size:1rem}.chapter{font-size:.875rem;letter-spacing:.12em}.btn,.chip,.field label,.resonance-title,.summary-row,.funding-item strong,.funding-item span{font-size:.875rem}
.tiny-note,.field-note,.progress-meta,.prototype-badge,.mode-card,.stage-caption,.test-note{font-size:.75rem;line-height:1.55}
.truth{font-size:.875rem}.birth-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.resonance-toggle{margin-top:22px}.group-picker span{font-size:.75rem}
.stage-caption{max-width:85%;bottom:18px}.mode-card{max-width:290px}.brand-mark{border-radius:50%;transform:none}
.btn:focus-visible{outline:2px solid #ebd6b2;outline-offset:4px}
@media(max-width:800px){.stage{min-height:0;height:390px}.stage[data-step="4"]{height:410px}.stage[data-step="2"],.stage[data-step="3"],.stage[data-step="6"]{height:230px}.stage[data-mode=signature],.stage[data-mode=world]{height:400px}.lead{font-size:1rem}.btn,.chip,.field label,.resonance-title{font-size:.875rem}.mode-card,.stage-caption,.stage[data-step="2"] .mode-card,.stage[data-step="3"] .mode-card,.stage[data-step="6"] .mode-card{font-size:.75rem}.prototype-badge,.chapter{font-size:.75rem}.stage-mode{font-size:20px}.keepsake-preview{display:block}.keepsake-preview img{width:155px}}

/* V0.9 — monumental glass, living ribbons and non-repeating group geometries. */
.stage{
  background:
    radial-gradient(circle at 48% 44%,rgba(87,151,173,.13),transparent 34%),
    radial-gradient(circle at 64% 60%,rgba(116,92,161,.1),transparent 38%),
    #030912;
  border-color:rgba(190,221,227,.16);
  box-shadow:0 28px 95px rgba(0,0,0,.52),inset 0 0 90px rgba(99,161,178,.045);
}
.stage::after{box-shadow:inset 0 0 58px rgba(1,5,13,.38)}
.stage[data-mode="birth"]{box-shadow:0 28px 100px rgba(0,0,0,.55),inset 0 0 110px rgba(222,186,111,.045)}
.stage[data-mode="link"]{box-shadow:0 28px 100px rgba(0,0,0,.55),inset 0 0 120px rgba(115,201,213,.05)}
.stage-mode{text-shadow:0 2px 24px rgba(236,208,153,.18)}
.resonance-toggle[aria-pressed="true"]{border-color:rgba(235,213,170,.7);background:rgba(226,196,139,.09);box-shadow:0 0 26px rgba(223,193,137,.08)}
@media(max-width:800px){
  .stage{height:440px}
  .stage[data-step="4"]{height:500px}
  .stage[data-mode="link"]{height:470px}
  .stage[data-mode="signature"],.stage[data-mode="world"]{height:455px}
  .stage[data-step="2"],.stage[data-step="3"],.stage[data-step="6"]{height:270px}
}