@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Raleway:wght@200;300&display=swap');

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg: #0a0a0f;
      --col-idle:      rgba(220, 180,  60, 0.40);
      --col-listening: rgba(80,  140, 220, 0.55);
      --col-thinking:  rgba(130,  80, 200, 0.55);
      --col-speaking:  rgba(220, 160,  50, 0.60);

      --ring-idle:      rgba(220, 180,  60, 0.18);
      --ring-listening: rgba(80,  140, 220, 0.20);
      --ring-thinking:  rgba(130,  80, 200, 0.20);
      --ring-speaking:  rgba(220, 160,  50, 0.22);

      --text: rgba(240, 235, 225, 0.90);
      --sub:  rgba(200, 195, 185, 0.50);
    }

    html, body {
      width: 100%; height: 100%;
      background: var(--bg);
      color: var(--text);
      font-family: 'Cormorant Garamond', serif;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      overflow: hidden;
      -webkit-tap-highlight-color: transparent;
    }

    /* ── stars background ── */
    #stars {
      position: fixed; inset: 0; pointer-events: none; z-index: 0;
    }

    /* ── main layout ── */
    .scene {
      position: relative; z-index: 1;
      display: flex; flex-direction: column;
      align-items: center; gap: 2rem;
      padding: 2rem 1.5rem;
      width: 100%; max-width: 420px;
      transition: opacity 2s ease;
    }

    .title-block { text-align: center; }
    .title-block h1 {
      font-size: 1.1rem;
      font-family: 'Raleway', sans-serif;
      font-weight: 200;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: rgba(220, 190, 100, 0.75);
    }
    .title-block p {
      font-size: 0.75rem;
      font-family: 'Raleway', sans-serif;
      font-weight: 300;
      letter-spacing: 0.2em;
      color: var(--sub);
      margin-top: 0.3rem;
    }

    /* ── opera image ── */
    .artwork {
      width: 220px;
      height: 220px;
      object-fit: cover;
      border-radius: 50%;
      opacity: 0.72;
      box-shadow:
        0 0 40px rgba(220, 180, 60, 0.25),
        0 0 80px rgba(220, 180, 60, 0.10);
      transition: opacity 0.8s ease;
    }
    body.speaking .artwork { opacity: 0.45; }
    body.listening .artwork { opacity: 0.55; }

    /* ── orb ── */
    .orb-wrap {
      position: relative;
      width: 160px; height: 160px;
      cursor: pointer;
    }

    .ring {
      position: absolute; inset: -20px;
      border-radius: 50%;
      border: 1px solid var(--ring-idle);
      transition: border-color 0.8s ease, transform 0.8s ease;
    }
    .ring-2 { inset: -40px; border-color: var(--ring-idle); opacity: 0.5; }
    .ring-3 { inset: -60px; border-color: var(--ring-idle); opacity: 0.25; }

    .orb {
      width: 160px; height: 160px;
      border-radius: 50%;
      background: radial-gradient(circle at 40% 35%,
        rgba(255,255,255,0.08) 0%,
        var(--col-idle) 50%,
        transparent 100%);
      box-shadow:
        0 0 60px var(--col-idle),
        0 0 120px var(--col-idle),
        inset 0 0 40px rgba(0,0,0,0.4);
      transition: background 0.8s ease, box-shadow 0.8s ease;
      position: relative; z-index: 1;
      display: flex; align-items: center; justify-content: center;
    }

    .orb-icon {
      font-size: 2rem;
      opacity: 0.6;
      transition: opacity 0.4s;
      user-select: none;
    }

    /* state classes */
    body.listening .orb {
      background: radial-gradient(circle at 40% 35%,
        rgba(255,255,255,0.12) 0%,
        var(--col-listening) 50%, transparent 100%);
      box-shadow: 0 0 80px var(--col-listening), 0 0 160px var(--col-listening),
                  inset 0 0 40px rgba(0,0,0,0.3);
    }
    body.listening .ring  { border-color: var(--ring-listening); }
    body.listening .ring-2{ border-color: var(--ring-listening); }
    body.listening .ring-3{ border-color: var(--ring-listening); }

    body.thinking .orb {
      background: radial-gradient(circle at 40% 35%,
        rgba(255,255,255,0.12) 0%,
        var(--col-thinking) 50%, transparent 100%);
      box-shadow: 0 0 80px var(--col-thinking), 0 0 160px var(--col-thinking),
                  inset 0 0 40px rgba(0,0,0,0.3);
    }
    body.thinking .ring  { border-color: var(--ring-thinking); }
    body.thinking .ring-2{ border-color: var(--ring-thinking); }
    body.thinking .ring-3{ border-color: var(--ring-thinking); }

    body.speaking .orb {
      background: radial-gradient(circle at 40% 35%,
        rgba(255,255,255,0.14) 0%,
        var(--col-speaking) 50%, transparent 100%);
      box-shadow: 0 0 80px var(--col-speaking), 0 0 160px var(--col-speaking),
                  inset 0 0 40px rgba(0,0,0,0.3);
    }
    body.speaking .ring  { border-color: var(--ring-speaking); }
    body.speaking .ring-2{ border-color: var(--ring-speaking); }
    body.speaking .ring-3{ border-color: var(--ring-speaking); }

    /* pulse animations */
    @keyframes pulse-slow { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
    @keyframes pulse-med  { 0%,100%{transform:scale(1)} 50%{transform:scale(1.07)} }
    @keyframes pulse-fast { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }
    @keyframes spin-ring  { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
    @keyframes spin-ring2 { from{transform:rotate(0deg)} to{transform:rotate(-360deg)} }

    body.idle     .orb { animation: pulse-slow 4s ease-in-out infinite; }
    body.listening .orb{ animation: pulse-med  1.5s ease-in-out infinite; }
    body.thinking  .ring { animation: spin-ring 3s linear infinite; }
    body.thinking  .ring-2{ animation: spin-ring2 5s linear infinite; }
    body.speaking  .orb { animation: pulse-fast 0.8s ease-in-out infinite; }

    /* ── text display ── */
    .text-area {
      text-align: center;
      min-height: 5rem;
      display: flex; flex-direction: column;
      align-items: center; gap: 0.6rem;
      width: 100%;
    }

    #alba-text {
      font-size: 1.1rem;
      font-style: italic;
      font-weight: 300;
      line-height: 1.7;
      color: var(--text);
      transition: opacity 0.4s;
      max-width: 340px;
    }

    #user-text {
      font-size: 0.8rem;
      font-family: 'Raleway', sans-serif;
      font-weight: 300;
      color: var(--sub);
      letter-spacing: 0.05em;
      min-height: 1.2rem;
    }

    /* ── status label ── */
    #status {
      font-family: 'Raleway', sans-serif;
      font-size: 0.7rem;
      font-weight: 300;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--sub);
      height: 1rem;
    }

    /* ── tap hint ── */
    #tap-hint {
      font-family: 'Raleway', sans-serif;
      font-size: 0.72rem;
      font-weight: 200;
      letter-spacing: 0.2em;
      color: rgba(200,195,185,0.35);
      text-transform: uppercase;
      transition: opacity 0.5s;
    }

    /* ── tap to speak button ── */
    #tap-speak {
      font-family: 'Raleway', sans-serif;
      font-size: 0.72rem;
      font-weight: 300;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: rgba(80, 140, 220, 0.85);
      border: 1px solid rgba(80, 140, 220, 0.35);
      background: transparent;
      padding: 0.65rem 1.5rem;
      border-radius: 2rem;
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s;
      -webkit-tap-highlight-color: transparent;
    }
    #tap-speak.visible { opacity: 1; pointer-events: auto; }

    /* ── error toast ── */
    #error-toast {
      position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%);
      background: rgba(200, 60, 60, 0.85);
      color: #fff;
      font-family: 'Raleway', sans-serif;
      font-size: 0.75rem;
      letter-spacing: 0.1em;
      padding: 0.6rem 1.2rem;
      border-radius: 2rem;
      opacity: 0; pointer-events: none;
      transition: opacity 0.4s;
      z-index: 10;
      text-align: center;
      max-width: 90vw;
    }
    #error-toast.show { opacity: 1; }