:root {
      --bg-obsidian: #040407;
      --glass-bg: rgba(255, 255, 255, 0.025);
      --glass-border: rgba(255, 255, 255, 0.08);
      --glass-hover: rgba(255, 255, 255, 0.18);
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      --safe-left: env(safe-area-inset-left, 0px);
      --safe-right: env(safe-area-inset-right, 0px);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      -webkit-user-select: none;
    }

    html, body {
      width: 100%;
      min-height: 100%;
      height: auto;
      background-color: var(--bg-obsidian);
      color: #ffffff;
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
      overflow-x: clip;
      -webkit-font-smoothing: antialiased;
    }

    body.modal-open {
      overflow: hidden;
    }

    /* Ambient grain & radial aura */
    .ambient-backdrop {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(circle at 50% 25%, rgba(255, 255, 255, 0.045) 0%, rgba(4, 4, 7, 0) 65%),
        var(--bg-obsidian);
    }


    body.intro-active {
      overflow: hidden;
    }

    #intro-screen {
      position: fixed;
      inset: 0;
      z-index: 30;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: calc(2rem + var(--safe-top)) calc(1.4rem + var(--safe-right)) calc(2rem + var(--safe-bottom)) calc(1.4rem + var(--safe-left));
      background:
        radial-gradient(circle at 50% 36%, rgba(255,255,255,0.065) 0%, rgba(255,255,255,0.018) 22%, rgba(4,4,7,0) 56%),
        radial-gradient(circle at 50% 55%, rgba(140,170,215,0.08) 0%, rgba(4,4,7,0) 42%),
        rgba(4,4,7,0.985);
      transition: opacity 0.95s cubic-bezier(.22,1,.36,1), visibility 0.95s ease;
      visibility: visible;
      opacity: 1;
      overflow: hidden;
    }

    #intro-screen::before {
      content: "";
      position: absolute;
      inset: -12%;
      background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.06), rgba(255,255,255,0) 58%);
      filter: blur(34px);
      opacity: 0;
    }
    #intro-screen.playing::before {
      animation: introHalo 4.4s cubic-bezier(.22,1,.36,1) forwards;
    }

    #intro-screen.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .intro-copy {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 0.25rem;
      pointer-events: none;
    }

    .intro-brand {
      position: absolute;
      bottom: calc(1.5rem + var(--safe-bottom));
      left: 1rem;
      right: 1rem;
      text-align: center;
      color: rgba(255,255,255,0.5);
      font-size: 0.75rem;
      letter-spacing: 0.08em;
    }

    .intro-line {
      display: block;
      font-weight: 220;
      color: rgba(255,255,255,0.97);
      letter-spacing: -0.035em;
      line-height: 0.96;
      filter: blur(16px);
      opacity: 0;
      transform: translateY(28px) scale(0.985);
      will-change: transform, opacity, filter;
    }

    .intro-line.hello {
      font-size: clamp(1.55rem, 4.6vw, 2.9rem);
    }

    .intro-line.name {
      font-size: clamp(2.4rem, 9.4vw, 6.8rem);
      max-width: min(93vw, 900px);
      overflow-wrap: anywhere;
      line-height: 1.06;
    }
    #intro-screen.playing .intro-line.hello {
      animation: introReveal 1.15s cubic-bezier(.22,1,.36,1) 0.22s forwards,
                 introExit 0.92s cubic-bezier(.55,0,.25,1) 3.0s forwards;
    }
    #intro-screen.playing .intro-line.name {
      animation: introReveal 1.28s cubic-bezier(.22,1,.36,1) 0.5s forwards,
                 introExit 0.95s cubic-bezier(.55,0,.25,1) 3.12s forwards;
    }

    body.intro-active #gallery-screen {
      opacity: 0;
      transform: scale(1.012);
      pointer-events: none;
    }

    @keyframes introReveal {
      0% {
        opacity: 0;
        transform: translateY(28px) scale(0.985);
        filter: blur(16px);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    @keyframes introExit {
      0% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
      100% {
        opacity: 0;
        transform: translateY(-18px) scale(1.012);
        filter: blur(16px);
      }
    }

    @keyframes introHalo {
      0% {
        opacity: 0;
        transform: scale(0.92);
      }
      25% {
        opacity: 1;
        transform: scale(1);
      }
      70% {
        opacity: .9;
      }
      100% {
        opacity: 0;
        transform: scale(1.08);
      }
    }

    /* Visual sanctuary: editorial image-led experience gallery */
    #gallery-screen {
      position: relative;
      z-index: 2;
      min-height: 100dvh;
      width: 100%;
      max-width: 1350px;
      margin: 0 auto;
      padding: calc(3.5rem + var(--safe-top)) calc(1.25rem + var(--safe-right))
               calc(4rem + var(--safe-bottom)) calc(1.25rem + var(--safe-left));
      display: flex;
      flex-direction: column;
      justify-content: center;
      transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
    }
    #gallery-screen.hidden {
      opacity: 0;
      transform: scale(.97);
      pointer-events: none;
      position: fixed;
      inset: 0;
    }
    .gallery-header { text-align: center; margin: 0 auto 2.8rem; max-width: 720px; }
    .profile-trigger {
      position: absolute;
      z-index: 6;
      right: calc(1.25rem + var(--safe-right));
      top: calc(1.15rem + var(--safe-top));
      height: 44px;
      width: 44px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      border: 1px solid rgba(238,246,255,0.12);
      background: rgba(255,255,255,0.035);
      color: rgba(250,253,255,0.8);
      cursor: pointer;
      transition: background .26s ease, border-color .26s ease, transform .26s ease;
    }
    .profile-trigger svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.35; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .profile-trigger:hover, .profile-trigger:focus-visible { background: rgba(255,255,255,.105); border-color: rgba(238,246,255,.28); transform: translateY(-1px); outline: none; }
    .profile-veil {
      position: fixed;
      inset: 0;
      z-index: 40;
      display: grid;
      place-items: center;
      align-items: safe center;
      overflow-y: auto;
      padding: calc(1.35rem + var(--safe-top)) calc(1.15rem + var(--safe-right)) calc(1.35rem + var(--safe-bottom)) calc(1.15rem + var(--safe-left));
      background: radial-gradient(circle at 50% 35%, rgba(211,226,245,.095), transparent 46%), #040407;
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .36s ease, visibility .36s ease;
    }
    .profile-veil.editing { background: rgba(4,4,7,.82); }
    .profile-veil.visible { opacity: 1; visibility: visible; pointer-events: auto; }
    .profile-panel {
      width: min(450px, 100%);
      position: relative;
      border-radius: 28px;
      padding: clamp(1.6rem, 4.4vw, 2.4rem);
      background: linear-gradient(145deg,rgba(255,255,255,.068),rgba(255,255,255,.022) 55%,rgba(255,255,255,.038));
      border: 1px solid rgba(232,243,255,.13);
      box-shadow: 0 25px 90px rgba(0,0,0,.42);
      transform: translateY(18px) scale(.982);
      transition: transform .55s cubic-bezier(.22,1,.36,1);
    }
    .profile-veil.visible .profile-panel { transform: translateY(0) scale(1); }
    .profile-ornament {
      position: relative;
      width: 72px; height: 72px;
      display: grid; place-items: center;
      margin-bottom: 1.9rem;
      border: 1px solid rgba(255,255,255,.17); border-radius: 50%;
      box-shadow: 0 0 35px rgba(255,255,255,.07), inset 0 0 25px rgba(255,255,255,.06);
    }
    .profile-ornament::before { content: ""; height: 30px; width: 30px; border-radius: 50%; background:#fff; box-shadow: 0 0 22px rgba(255,255,255,.6),0 0 55px rgba(255,255,255,.24); }
    .profile-eyebrow { font-size:.62rem; letter-spacing:.35em; color:rgba(230,239,250,.48); text-transform:uppercase; font-weight:500; margin-bottom:.65rem; }
    .profile-heading { font-size:clamp(2rem, 6vw, 3.05rem); line-height:1.1; font-weight:250; letter-spacing:-.04em; color:rgba(255,255,255,.96); margin-bottom:.8rem; }
    .profile-description { font-size:.87rem; line-height:1.7; color:rgba(222,233,246,.6); font-weight:300; margin-bottom:1.8rem; }
    .profile-field-label { display:block; font-size:.68rem; letter-spacing:.19em; text-transform:uppercase; font-weight:500; color:rgba(234,244,255,.6); margin-bottom:.7rem; }
    .profile-input {
      display:block; width:100%; height:56px; padding:0 1rem;
      font: 350 1.17rem/1.2 -apple-system, BlinkMacSystemFont, 'Inter','Segoe UI',Roboto,sans-serif;
      background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); border-radius:15px;
      color:#fff; outline:none; user-select:text; -webkit-user-select:text;
      transition:border-color .25s ease,background .25s ease,box-shadow .25s ease;
    }
    .profile-input::placeholder { color:rgba(255,255,255,.26); }
    .profile-input:focus { border-color:rgba(255,255,255,.46); background:rgba(255,255,255,.06); box-shadow:0 0 0 3px rgba(255,255,255,.055); }
    .profile-error { min-height:19px; font-size:.72rem; margin-top:.45rem; color:#ecc4bd; }
    .profile-submit {
      display:block; width:100%; min-height:53px; border-radius:999px; margin-top:1rem;
      border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.93); color:#08090d;
      font-size:.77rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; cursor:pointer;
      transition:background .25s ease,transform .25s ease;
    }
    .profile-submit:hover, .profile-submit:focus-visible { background:#fff; transform:translateY(-1px); outline: none; }
    .profile-note { margin-top:1.4rem; font-size:.71rem; line-height:1.6; color:rgba(224,238,252,.36); text-align:center; }
    .profile-cancel {
      margin-top:.8rem; width:100%; border:0; background:none; color:rgba(255,255,255,.58);
      min-height:38px; font-size:.74rem; letter-spacing:.1em; cursor:pointer;
    }
    .profile-cancel:hover, .profile-cancel:focus-visible { color:white; outline:none; }
    .profile-veil.setup .profile-cancel { display:none; }
    @media (max-width: 600px) {
      .profile-trigger { right:calc(.9rem + var(--safe-right)); top:calc(.88rem + var(--safe-top)); }
      .profile-panel { border-radius:24px; }
      .profile-ornament { width:64px; height:64px; margin-bottom:1.4rem; }
    }

    .gallery-kicker {
      font-size: .66rem;
      font-weight: 500;
      letter-spacing: .36em;
      text-transform: uppercase;
      color: rgba(215,228,245,.49);
      margin-bottom: 1.15rem;
    }
    .gallery-title {
      font-size: clamp(2.45rem, 6vw, 5rem);
      line-height: 1.03;
      font-weight: 200;
      letter-spacing: -.045em;
      color: rgba(255,255,255,.96);
      text-wrap: balance;
    }
    .gallery-subtitle {
      margin-top: 1rem;
      font-size: clamp(.83rem,1.4vw,.98rem);
      line-height: 1.65;
      font-weight: 300;
      letter-spacing: .025em;
      color: rgba(255,255,255,.47);
    }
    .gallery-rule {
      display: flex; align-items: center; justify-content: center; gap: 14px;
      margin: 1.65rem auto 0;
      color: rgba(255,255,255,.27);
      font: 400 .62rem/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      letter-spacing: .22em;
      text-transform: uppercase;
    }
    .gallery-rule::before,.gallery-rule::after {
      content: ""; width: 31px; height: 1px; background: rgba(255,255,255,.17);
    }
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(2,minmax(0,1fr));
      gap: 1.05rem;
      width: 100%;
    }
    .exp-card {
      display: flex;
      flex-direction: column;
      text-align: left;
      font: inherit;
      width: 100%;
      color: inherit;
      border: 1px solid rgba(216,234,255,.105);
      border-radius: 19px;
      padding: 0;
      background: linear-gradient(155deg,rgba(255,255,255,.043),rgba(255,255,255,.014));
      overflow: hidden;
      cursor: pointer;
      position: relative;
      box-shadow: 0 17px 58px rgba(0,0,0,.14);
      transition: transform .55s cubic-bezier(.22,1,.36,1),
                  border-color .4s ease, box-shadow .55s ease;
    }
    .exp-card:hover,.exp-card:focus-visible {
      transform: translateY(-6px);
      border-color: rgba(231,243,255,.28);
      box-shadow: 0 25px 76px rgba(0,0,0,.35),0 0 45px rgba(184,217,255,.035);
    }
    .exp-card:focus-visible { outline: 2px solid rgba(215,235,255,.65); outline-offset: 4px; }
    .exp-card:active { transform: translateY(-1px); }
    .card-visual {
      width: 100%;
      aspect-ratio: 1.65;
      position: relative;
      overflow: hidden;
      background: #0b1018;
      isolation: isolate;
    }
    .card-visual::after {
      content: "";
      pointer-events: none;
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg,transparent 56%,rgba(3,5,9,.4)),
                  linear-gradient(115deg,rgba(255,255,255,.045),transparent 40%);
    }
    .card-preview {
      display:block;
      width:100%;
      height:100%;
      transition: transform .95s cubic-bezier(.22,1,.36,1), filter .6s ease;
    }
    .exp-card:hover .card-preview,.exp-card:focus-visible .card-preview {
      transform:scale(1.04); filter:brightness(1.14);
    }
    .card-index, .card-arrow {
      position:absolute;z-index:2;
      color:rgba(242,250,255,.79);
      background:rgba(8,13,21,.36);
      border:1px solid rgba(255,255,255,.10);
      backdrop-filter:blur(13px);
      -webkit-backdrop-filter:blur(13px);
    }
    .card-index {
      left:16px; top:16px; border-radius:999px;
      padding:7px 11px;
      font:400 .60rem/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      letter-spacing:.12em;
    }
    .card-arrow {
      right:16px;top:16px; border-radius:50%; width:30px;height:30px;
      display:grid;place-items:center;
      font-size:1.05rem; line-height:1;
      transition:background .3s ease,transform .4s ease;
    }
    .exp-card:hover .card-arrow { background:rgba(217,237,255,.17);transform:translate(2px,-2px); }
    .card-body { padding:1.4rem 1.5rem 1.6rem; flex:1; display:flex;flex-direction:column; }
    .card-top {
      display:flex;align-items:center;justify-content:space-between;gap:10px;
      margin-bottom:.9rem;
    }
    .card-category {
      font-size:.61rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
      color:rgba(214,230,248,.38);
    }
    .card-badge {
      font-size:.66rem;font-weight:400;letter-spacing:.065em;
      color:rgba(244,249,255,.7);white-space:nowrap;
      font-variant-numeric:tabular-nums;
    }
    .card-name {
      font-size:clamp(1.12rem,1.6vw,1.43rem);
      font-weight:300;letter-spacing:.012em;color:rgba(255,255,255,.95);
      line-height:1.2;margin-bottom:.62rem;
    }
    .card-benefit {
      max-width:32ch;
      font-size:.78rem;line-height:1.65;font-weight:300;
      color:rgba(224,234,247,.5);
      margin-top:auto;
    }
    .gallery-footer {
      margin-top:2rem;
      text-align:center;
      color:rgba(255,255,255,.29);
      font-size:.61rem;letter-spacing:.23em;text-transform:uppercase;
    }
    .gallery-actions {
      margin-top: 1.3rem;
      display: flex;
      justify-content: center;
      gap: 0.75rem;
      flex-wrap: wrap;
    }
    .gallery-action {
      min-height: 42px;
      padding: 0 1rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.035);
      color: rgba(247,251,255,.83);
      font-size: .72rem;
      font-weight: 400;
      letter-spacing: .16em;
      text-transform: uppercase;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      cursor: pointer;
      transition: background .25s ease, border-color .25s ease, transform .2s ease;
    }
    .gallery-action:hover, .gallery-action:focus-visible {
      background: rgba(255,255,255,.09);
      border-color: rgba(255,255,255,.2);
      transform: translateY(-1px);
      outline: none;
    }
    .about-overlay {
      position: fixed;
      inset: 0;
      z-index: 22;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: calc(1.2rem + var(--safe-top)) calc(1rem + var(--safe-right)) calc(1.2rem + var(--safe-bottom)) calc(1rem + var(--safe-left));
      background: rgba(4,4,7,.72);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .35s ease, visibility .35s ease;
    }
    .about-overlay.open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
    .about-panel {
      width: min(680px, 100%);
      max-height: min(90dvh, 820px);
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      border-radius: 28px;
      border: 1px solid rgba(255,255,255,.11);
      background: linear-gradient(160deg, rgba(255,255,255,.065), rgba(255,255,255,.018));
      box-shadow: 0 26px 90px rgba(0,0,0,.46);
      padding: 1.3rem 1.15rem 1.2rem;
      color: rgba(255,255,255,.9);
    }
    .about-panel-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1rem;
    }
    .about-kicker {
      font-size: .64rem;
      font-weight: 500;
      letter-spacing: .28em;
      text-transform: uppercase;
      color: rgba(214,230,248,.42);
      margin-bottom: .55rem;
    }
    .about-title {
      font-size: clamp(1.6rem, 4vw, 2.4rem);
      line-height: 1.04;
      letter-spacing: -.04em;
      font-weight: 240;
      color: rgba(255,255,255,.97);
    }
    .about-close {
      width: 42px;
      height: 42px;
      flex: 0 0 auto;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      color: rgba(255,255,255,.82);
      display: inline-grid;
      place-items: center;
      font-size: 1.05rem;
      cursor: pointer;
    }
    .about-close:hover, .about-close:focus-visible {
      background: rgba(255,255,255,.09);
      border-color: rgba(255,255,255,.22);
      outline: none;
    }
    .about-body {
      display: grid;
      gap: .9rem;
    }
    .about-copy {
      font-size: .92rem;
      line-height: 1.78;
      font-weight: 300;
      color: rgba(228,237,248,.74);
    }
    .about-points {
      display: grid;
      gap: .55rem;
      margin-top: .1rem;
    }
    .about-point {
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 16px;
      padding: .82rem .92rem;
      background: rgba(255,255,255,.025);
      color: rgba(240,246,255,.76);
      font-size: .8rem;
      line-height: 1.55;
    }
    .privacy-details {
      margin-top: .5rem;
      border-top: 1px solid rgba(255,255,255,.10);
      padding-top: 1.05rem;
    }
    .privacy-details summary {
      cursor: pointer;
      color: rgba(242,250,255,.83);
      font-size: .75rem;
      font-weight: 500;
      letter-spacing: .15em;
      text-transform: uppercase;
      padding: .25rem 0 .9rem;
    }
    .privacy-details p {
      color: rgba(229,239,248,.62);
      font-size: .78rem;
      line-height: 1.7;
      margin-bottom: .66rem;
    }
    .privacy-details strong { color: rgba(255,255,255,.84); font-weight: 500; }
    .about-signoff {
      margin-top: .15rem;
      font-size: .68rem;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(255,255,255,.32);
    }
    @media (max-width: 1050px) {
      #gallery-screen { max-width: 890px; }
    }
    @media (max-width: 600px) {
      #gallery-screen { padding-top:calc(2.65rem + var(--safe-top)); justify-content:flex-start; }
      .gallery-header { margin-bottom:2.15rem; }
      .gallery-title { font-size:clamp(2.15rem,8vw,3.2rem); }
      .gallery-rule { margin-top:1.1rem; }
      .cards-grid { gap:.8rem; }
      .card-visual { aspect-ratio:1.08; }
      .card-body { padding:1rem .95rem 1.08rem; }
      .card-top { margin-bottom:.55rem; flex-direction:column; align-items:flex-start; gap:5px; }
      .card-name { margin-bottom:.38rem; font-size:clamp(.95rem,4.3vw,1.18rem); }
      .card-benefit { font-size:.71rem; line-height:1.5; }
      .card-index { left:10px; top:10px; padding:6px 9px; font-size:.54rem; }
      .card-arrow { right:10px; top:10px; width:28px; height:28px; }
      .gallery-actions { margin-top: 1rem; gap: .6rem; }
      .gallery-action { min-height: 40px; padding: 0 .9rem; font-size: .67rem; }
      .gallery-footer { margin-top:1.6rem; font-size:.56rem; }
      .about-panel { padding: 1.05rem .92rem 1rem; border-radius: 22px; }
      .about-copy { font-size: .84rem; line-height: 1.68; }
      .about-point { font-size: .74rem; }
    }
    @media (prefers-reduced-motion: reduce) {
      .exp-card,.card-preview,.card-arrow { transition:none; }
    }

    /* ==========================================
       ECRANUL 2: SANCTUARUL FULL-SCREEN (100% EDGE-TO-EDGE)
       ========================================== */
    #experience-screen {
      position: fixed;
      inset: 0;
      width: 100vw;
      width: 100dvw;
      height: 100vh;
      height: 100dvh;
      background-color: var(--bg-obsidian);
      z-index: 10;
      overflow: hidden;
      touch-action: none;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }

    #experience-screen.active {
      opacity: 1;
      pointer-events: auto;
    }

    #meditation-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      z-index: 1;
    }

    /* HUD Flotant Auto-Hiding */
    .hud-bar {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 5;
      padding: calc(1rem + var(--safe-top)) calc(1.1rem + var(--safe-right)) 1rem calc(1.1rem + var(--safe-left));
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: opacity 0.8s ease;
      opacity: 0.9;
    }

    .hud-bar.dimmed {
      opacity: 0.08;
    }

    .hud-group {
      display: flex;
      align-items: center;
      gap: 0.55rem;
    }

    .hud-btn {
      min-height: 42px;
      padding: 0 0.95rem;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.04);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.82);
      font-size: 0.75rem;
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
      cursor: pointer;
      transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
    }

    .hud-btn.icon-only {
      width: 42px;
      padding: 0;
    }

    .hud-btn:hover, .hud-btn:active {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.24);
    }

    /* STRATUL TEXTULUI DE GHIDAJ — ANCORAT ÎN PARTEA DE JOS A ECRANULUI */
    .bottom-guidance {
      position: absolute;
      left: 0;
      right: 0;
      bottom: calc(4.2vh + var(--safe-bottom));
      z-index: 4;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      text-align: center;
      padding: 0 1.5rem;
    }

    /* Numărătoare vizibilă jos; în Traseul de Lumină rămâne în centru. */
    .countdown-number {
      margin-bottom: 0.76rem;
      font-size: clamp(5.6rem, 16vmin, 11rem);
      font-weight: 200;
      line-height: 0.87;
      letter-spacing: -0.05em;
      color: rgba(255, 255, 255, 0.46);
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum";
      text-shadow: 0 0 36px rgba(255, 255, 255, 0.07);
    }

    .bottom-guidance.route-mode .countdown-number {
      display: none;
    }

    .phase-label {
      font-size: clamp(0.88rem, 2.8vw, 1.12rem);
      font-weight: 300;
      letter-spacing: 0.46em;
      text-indent: 0.46em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.62);
      margin-bottom: 0.85rem;
      transition: opacity 0.35s ease, transform 0.35s ease, filter 0.35s ease;
    }

    .phase-progress-track {
      width: min(140px, 38vw);
      height: 1px;
      background: rgba(255, 255, 255, 0.08);
      overflow: hidden;
      margin-bottom: 0.7rem;
      border-radius: 1px;
    }

    .phase-progress-fill {
      height: 100%;
      width: 0%;
      background: rgba(255, 255, 255, 0.48);
      box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
    }

    .experience-caption {
      font-size: 0.66rem;
      font-weight: 400;
      letter-spacing: 0.28em;
      text-indent: 0.28em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.22);
    }

    @media (max-height: 650px) {
      .bottom-guidance {
        bottom: calc(2.5vh + var(--safe-bottom));
      }
      .countdown-number {
        font-size: clamp(4.6rem, 13vmin, 6.6rem);
        margin-bottom: 0.6rem;
      }
      .phase-label {
        margin-bottom: 0.6rem;
      }
      .intro-line.hello {
        font-size: clamp(1.35rem, 6vw, 2rem);
      }
      .intro-line.name {
        font-size: clamp(2.2rem, 13vw, 4rem);
      }
    }


    /* Appearance controls live only in the editing profile, never onboarding. */
    .profile-heading:focus { outline:none; }
    .appearance { border:0; padding:0; margin:1.3rem 0 0; min-width:0; }
    .appearance legend { color:#dedee2; font-size:.8rem; margin-bottom:.7rem; width:100%; }
    .appearance-heading { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }
    .appearance-hint { color:#bcbcc5; font-size:.68rem; font-weight:400; }
    .profile-veil.setup .appearance { display:none; }
    .theme-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; }
    .theme-option { position:relative; display:block; min-width:0; cursor:pointer; }
    .theme-option input { position:absolute; top:0; left:0; width:100%; height:100%; margin:0; opacity:0; z-index:1; cursor:pointer; }
    .theme-tile { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
      min-height:76px; gap:.45rem; padding:.65rem .3rem; border:1px solid #62626a;
      border-radius:14px; background:#101014; color:#eeeef2; font-size:.73rem; text-align:center; overflow-wrap:anywhere; }
    .theme-tile > span { min-width:0; max-width:100%; }
    .theme-option input:checked + .theme-tile { border-color:#fff; }
    .theme-option input:focus-visible + .theme-tile { text-decoration:underline; text-underline-offset:4px; }
    .theme-check { position:absolute; top:5px; right:7px; color:white; opacity:0; font-size:.8rem; }
    .theme-option input:checked + .theme-tile .theme-check { opacity:1; }
    .theme-orb { display:block; width:17px; height:17px; border-radius:50%; background:var(--swatch-core);
      box-shadow:0 0 9px 3px rgba(var(--swatch-glow),.35); }
    .theme-option.adaptive { grid-column:1 / -1; }
    .adaptive .theme-tile { min-height:70px; flex-direction:row; gap:.85rem; padding:.7rem 1rem; justify-content:flex-start; text-align:left; }
    .adaptive-dots { display:flex; gap:7px; flex-shrink:0; }
    .adaptive-dots i { display:block; width:9px; height:9px; border-radius:50%; }
    .theme-description { display:block; color:#bcbcc5; font-size:.68rem; margin-top:.25rem; line-height:1.4; }
    @media(max-width:359px) { .theme-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

    .theme-preview { position:fixed; top:0; left:0; width:100%; height:100%; z-index:60;
      display:grid; place-items:center; pointer-events:none; background:rgba(4,4,7,.86);
      opacity:0; visibility:hidden; transition:opacity .32s ease,visibility .32s; }
    .theme-preview.visible { opacity:1; visibility:visible; }
    .theme-preview-orb { position:relative; width:min(32vw,140px); height:min(32vw,140px);
      border-radius:50%; background:#fff; transform:scale(.12); opacity:0;
      box-shadow:0 0 16px rgba(var(--preview-glow),.25);
      transition:transform .32s cubic-bezier(.4,0,.6,1),opacity .28s ease; }
    .theme-preview-orb::before { content:""; position:absolute; top:-140%; left:-140%; width:380%; height:380%;
      border-radius:50%; z-index:-1; background:radial-gradient(circle,rgba(var(--preview-glow),.38) 0%,rgba(var(--preview-glow),.18) 28%,rgba(var(--preview-glow),.05) 48%,rgba(var(--preview-glow),0) 70%); }
    .theme-preview-orb::after { content:""; position:absolute; top:0; left:0; width:100%; height:100%; border-radius:inherit; background:#fff; }
    .theme-preview.visible .theme-preview-orb { transform:scale(1); opacity:1; transition-duration:.48s,.3s; }
    @media(prefers-reduced-motion:reduce) {
      .theme-preview-orb, .theme-preview.visible .theme-preview-orb { transform:none; transition:opacity .12s ease; }
      .theme-preview { transition:opacity .12s ease,visibility .12s; }
    }

    /* Only decorative/light roles are tinted. Classic continues using the original CSS. */
    html:not([data-palette="classic"]) .ambient-backdrop {
      background:radial-gradient(circle at 50% 25%,rgba(var(--theme-glow),.045) 0%,rgba(4,4,7,0) 65%),var(--bg-obsidian);
    }
    html:not([data-palette="classic"]) #intro-screen {
      background:radial-gradient(circle at 50% 36%,rgba(var(--theme-glow),.065) 0%,rgba(var(--theme-glow),.018) 22%,rgba(4,4,7,0) 56%),
        radial-gradient(circle at 50% 55%,rgba(var(--theme-glow),.08) 0%,rgba(4,4,7,0) 42%),rgba(4,4,7,.985);
    }
    html:not([data-palette="classic"]) #intro-screen::before { background:radial-gradient(circle at 50% 50%,rgba(var(--theme-glow),.06),rgba(255,255,255,0) 58%); }
    html:not([data-palette="classic"]) .profile-ornament { border-color:rgba(var(--theme-line),.17); box-shadow:0 0 35px rgba(var(--theme-glow),.07),inset 0 0 25px rgba(var(--theme-glow),.06); }
    html:not([data-palette="classic"]) .profile-ornament::before { background:rgb(var(--theme-core)); box-shadow:0 0 22px rgba(var(--theme-glow),.6),0 0 55px rgba(var(--theme-glow),.24); }
    html:not([data-palette="classic"]) .exp-card:hover, html:not([data-palette="classic"]) .exp-card:focus-visible { border-color:rgba(var(--theme-line),.28); box-shadow:0 25px 76px rgba(0,0,0,.35),0 0 45px rgba(var(--theme-glow),.035); }
    html:not([data-palette="classic"]) .exp-card:focus-visible { outline-color:rgb(var(--theme-line)); }
    html:not([data-palette="classic"]) .profile-input:focus { border-color:rgba(var(--theme-line),.46); box-shadow:0 0 0 3px rgba(var(--theme-glow),.055); }
    /* The lighter accent preserves progress contrast at the original opacity. */
    html:not([data-palette="classic"]) #phase-bar { background:rgba(var(--theme-particle),.48); box-shadow:0 0 8px rgba(var(--theme-glow),.5); }