/* Tokens match the Prince Street share pages (psc-share) so they read as one system. */
    :root {
      color-scheme: light dark;
      --paper: #f4f6f9;
      --panel: #ffffff;
      --ink: #1c2230;
      --muted: #5b6474;
      --rule: #d6dbe3;
      --navy: #234a73;
      --on-navy: #f4f6f9;
      --alert: #8a3b2a;
      --display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      --body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --paper: #11151b;
        --panel: #181d25;
        --ink: #e6e9ee;
        --muted: #9aa3b0;
        --rule: #2a313c;
        --navy: #8db3dc;
        --on-navy: #11151b;
        --alert: #e0a08f;
      }
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; height: 100%; }
    [hidden] { display: none !important; }
    body {
      background: var(--paper);
      color: var(--ink);
      font-family: var(--body);
      font-size: 16px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    main {
      min-height: 100%;
      max-width: 30rem;
      margin: 0 auto;
      padding: max(28px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom));
      display: grid;
      grid-template-rows: auto 1fr auto;
      text-align: center;
    }
    .house {
      font-family: var(--display);
      font-size: 17px;
      letter-spacing: 0.01em;
      color: var(--muted);
      margin: 0;
    }
    .stage { align-self: center; padding: 24px 0 32px; }
    h1 {
      font-family: var(--display);
      font-weight: 400;
      font-size: clamp(76px, 25vw, 124px);
      line-height: 0.95;
      letter-spacing: -0.03em;
      margin: 0;
    }
    .for {
      font-family: var(--display);
      font-style: italic;
      font-size: 20px;
      color: var(--muted);
      margin: 10px 0 0;
    }

    /* The ring field is the one expressive element: it is June's voice made visible. */
    .voice {
      --level: 0;
      position: relative;
      width: min(78vw, 300px);
      aspect-ratio: 1;
      margin: 36px auto 20px;
      display: grid;
      place-items: center;
      transition: width 300ms ease;
    }
    /* After a call the feedback prompt matters more than the rings: make room for it. */
    [data-ended] .voice { width: min(50vw, 190px); margin: 20px auto 14px; }
    [data-ended] .talk { font-size: 17px; }
    .ring {
      position: absolute;
      inset: 0;
      margin: auto;
      width: calc(var(--size) * 1%);
      height: calc(var(--size) * 1%);
      border-radius: 50%;
      border: 1px solid var(--rule);
      transform: scale(calc(1 + var(--level) * var(--gain)));
      transition: border-color 400ms ease, opacity 400ms ease;
      will-change: transform;
    }
    /* Sizes and gains are paired so the outermost ring at full volume (88% x 1.13)
       stays inside the square and never runs over the text around it. */
    .ring:nth-child(1) { --size: 60; --gain: 0.05; }
    .ring:nth-child(2) { --size: 67; --gain: 0.07; opacity: 0.85; }
    .ring:nth-child(3) { --size: 74; --gain: 0.09; opacity: 0.68; }
    .ring:nth-child(4) { --size: 81; --gain: 0.11; opacity: 0.5; }
    .ring:nth-child(5) { --size: 88; --gain: 0.13; opacity: 0.34; }
    [data-state="speaking"] .ring { border-color: var(--navy); }
    [data-state="listening"] .ring { border-color: var(--muted); }

    .talk {
      position: relative;
      width: 48%;
      aspect-ratio: 1;
      border-radius: 50%;
      border: 0;
      background: var(--navy);
      color: var(--on-navy);
      font-family: var(--display);
      font-size: 21px;
      line-height: 1.15;
      padding: 0 14px;
      cursor: pointer;
      transition: transform 160ms ease, background 300ms ease, color 300ms ease;
      -webkit-tap-highlight-color: transparent;
    }
    .talk:active:not(:disabled) { transform: scale(0.97); }
    .talk:disabled { cursor: default; }
    [data-state="listening"] .talk { background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
    [data-state="connecting"] .talk { opacity: 0.75; }
    :focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }

    .end {
      font: inherit;
      font-weight: 500;
      color: var(--ink);
      background: transparent;
      border: 1px solid var(--rule);
      border-radius: 999px;
      padding: 11px 22px;
      cursor: pointer;
    }
    .hint { color: var(--muted); margin: 0 auto 14px; max-width: 24rem; min-height: 3em; text-wrap: balance; }
    [data-ended] .hint { min-height: 0; }
    .problem { color: var(--alert); }

    .after {
      margin: 8px auto 0;
      max-width: 24rem;
      padding-top: 24px;
      border-top: 1px solid var(--rule);
    }
    .after p { margin: 0 0 16px; font-family: var(--display); font-size: 21px; line-height: 1.35; }
    .after a {
      display: inline-block;
      font-weight: 500;
      color: var(--on-navy);
      background: var(--navy);
      border-radius: 999px;
      padding: 12px 24px;
      text-decoration: none;
    }
    footer { color: var(--muted); font-size: 13.5px; line-height: 1.5; max-width: 25rem; margin: 0 auto; }
    footer p { margin: 0; }

    @media (prefers-reduced-motion: reduce) {
      .ring { transform: none; }
      .talk { transition: none; }
    }
  
main { max-width: 42rem; } .mail-panel { text-align:left; margin:24px 0; border-top:1px solid var(--rule); padding-top:20px; } .mail-panel h2 { font-family:var(--display); font-weight:400; } label { display:block; margin:12px 0 4px; } input, select, textarea { width:100%; font:inherit; color:var(--ink); background:var(--panel); border:1px solid var(--rule); border-radius:6px; padding:10px; } textarea { min-height:7rem; } .actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; } pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; background:var(--panel); border-radius:8px; padding:16px; } .results { list-style:none; padding:0; } .results button { width:100%; text-align:left; margin:6px 0; } .badge { font-size:13px; color:var(--muted); } button:disabled { opacity:.5; cursor:default; } a { color:var(--navy); }
.leave { display:inline-block; margin-top:14px; font-size:15px; color:var(--muted); }
.signin { display:inline-block; font-weight:500; color:var(--on-navy); background:var(--navy); border-radius:999px; padding:12px 24px; text-decoration:none; }