/* The Try page (/try/): the face on the left with the conversation under it, its controls on the right; one column
   on a phone, with the wireframe to skin slider just under the conversation. */
.try { padding: 26px 0 70px; }
.try-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr;
  grid-template-areas: "stage head" "stage blend" "stage panel"; column-gap: 32px; align-items: start; }
.try-head { grid-area: head; }
.try-panel { grid-area: panel; }

.try-facecol { grid-area: stage; position: sticky; top: 84px; }
.try-stage {
  position: relative; aspect-ratio: 1; max-height: max(340px, calc(100svh - 300px)); border-radius: 22px; overflow: hidden;
  border: 1px solid var(--line); background: radial-gradient(70% 60% at 50% 42%, rgba(99, 102, 241, .16), transparent 70%), var(--night-2);
}
.try-stage canvas { display: block; width: 100%; height: 100%; }
.try-drop { position: absolute; inset: 12px; display: grid; place-items: center; border-radius: 16px;
  border: 2px dashed rgba(34, 211, 238, .7); background: rgba(6, 11, 24, .72); pointer-events: none; }
.try-drop span { font: 600 1.1rem var(--display); color: var(--text); }
/* subtitles, kept to their last couple of lines by try.js: the visitor's at the top, the face's at the bottom, clear of
   the mouth */
.try-subs { position: absolute; inset: 14px; pointer-events: none; }
.try-subs.off { display: none; }
#sub-you, #sub-face { position: absolute; left: 50%; transform: translateX(-50%); width: max-content; max-width: 100%; }
#sub-you { top: 0; }
#sub-face { bottom: 0; }
.try-sub { margin: 0; max-width: 100%; padding: 8px 12px; border-radius: 12px; background: rgba(10, 18, 38, .84);
  border: 1px solid var(--line-2); color: var(--text); font-size: 0.95rem; line-height: 1.45;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .9); }
.try-sub .who { display: inline-block; margin-right: 8px; padding: 3px 6px; border-radius: 6px; vertical-align: 1px;
  font: 500 0.68rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.try-sub .who.you { color: #fde68a; background: rgba(253, 230, 138, .1); }
.try-sub .who.face { color: var(--cyan); background: rgba(34, 211, 238, .1); }
#sub-you { color: var(--muted); font-size: 0.88rem; }
.try-status { position: absolute; top: 14px; left: 14px; right: 14px; margin: 0; font-size: 0.88rem; color: var(--muted); }
.try-status:empty { display: none; }
.try-status { width: fit-content; max-width: calc(100% - 28px); padding: 7px 12px; border-radius: 10px;
  background: rgba(10, 18, 38, .8); border: 1px solid var(--line-2); }
.try-status.busy { color: var(--cyan); }
.try-status.bad { color: #fca5a5; border-color: rgba(252, 165, 165, .35); }

/* the conversation, under the face: its state and time, then a line to type in, the microphone and subtitles */
.try-talk { margin-top: 10px; padding: 12px 14px 10px; border-radius: 18px; border: 1px solid var(--line-2);
  background: rgba(13, 22, 48, .55); }
.try-talk-top { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.try-live { display: flex; align-items: center; gap: 9px; margin: 0; min-width: 0; color: var(--muted); font-size: 0.92rem; }
.try-live #live-text { overflow: hidden; text-overflow: ellipsis; }
.try-live .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--dim); }
.try-live[data-state="connecting"] .dot { background: #fbbf24; animation: try-pulse 1s ease-in-out infinite; }
.try-live[data-state="ready"] .dot { background: #34d399; box-shadow: 0 0 10px #34d399; }
.try-live[data-state="thinking"] .dot { background: var(--violet); animation: try-pulse .8s ease-in-out infinite; }
.try-live[data-state="speaking"] .dot { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: try-pulse .5s ease-in-out infinite; }
.try-live[data-state="error"] { color: #fca5a5; }
.try-live[data-state="error"] .dot { background: #f87171; }
.try-live[data-state="ready"], .try-live[data-state="speaking"], .try-live[data-state="thinking"] { color: var(--text); }
@keyframes try-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .try-live .dot { animation: none !important; } }
.try-left { margin-left: auto; font: 500 0.8rem var(--mono); color: var(--dim); font-variant-numeric: tabular-nums; }
.try-left:empty + .btn { margin-left: auto; }
.try-talk-top .btn { flex: none; }
.try-talk-msg { margin: 6px 0 0; color: var(--muted); font-size: 0.88rem; line-height: 1.45; }
.try-talk-msg.bad { color: #fca5a5; }
.try-talk-row { display: flex; gap: 8px; margin-top: 10px; }
.try-say { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2);
  background: #070d1f; color: var(--text); font: 400 0.95rem var(--body); }
.try-say::placeholder { color: var(--dim); }
.try-say:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.try-icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line-2); background: rgba(13, 22, 48, .7); color: var(--muted); }
.try-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.try-icon:hover { color: var(--text); border-color: rgba(34, 211, 238, .5); }
.try-icon[aria-pressed="true"] { color: var(--cyan); border-color: rgba(34, 211, 238, .75); background: rgba(34, 211, 238, .1);
  box-shadow: 0 0 16px -6px rgba(34, 211, 238, .8); }
.try-icon[aria-pressed="true"] .off { display: none; }
#live-mic[aria-pressed="true"] { color: #f87171; border-color: rgba(248, 113, 113, .7); background: rgba(248, 113, 113, .1);
  box-shadow: 0 0 16px -6px rgba(248, 113, 113, .9); }
.try-icon.send { background: var(--grad); border: 0; color: #050914; }
.try-icon.send:disabled { opacity: .45; cursor: default; }
.try-talk-note { margin: 9px 2px 0; color: var(--dim); font-size: 0.8rem; line-height: 1.45; }
.try-talk-note a { color: var(--muted); }

.try-head h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.try-head .lede.small { margin-top: 0.8rem; }

/* wireframe <-> skin: the track runs from the wireframe's cyan to skin, lit up to the thumb (--v, set by try.js) */
.try-blend { grid-area: blend; margin-top: 24px; padding: 12px 18px 10px; border-radius: 16px; border: 1px solid var(--line-2);
  background: linear-gradient(100deg, rgba(34, 211, 238, .07), rgba(13, 22, 48, .55) 45%, rgba(240, 184, 154, .07)); }
.try-blend-ends { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.try-end { justify-self: start; border: 0; background: none; padding: 4px 0; cursor: pointer; color: var(--dim);
  font: 500 0.76rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; transition: color .2s; }
.try-end:hover { color: var(--text); }
#to-skin { justify-self: end; }
#to-wire.on { color: var(--cyan); }
#to-skin.on { color: #f0b89a; }
.try-blend output { font: 600 0.98rem/1 var(--display); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.try-blend-range { --v: 1; --thumb: 22px; display: block; width: 100%; height: 34px; margin: 0; background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none; border-radius: 10px; }
.try-blend-range:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.try-blend-range::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  background: linear-gradient(90deg, transparent calc(var(--thumb) / 2 + var(--v) * (100% - var(--thumb))), rgba(6, 11, 24, .72) 0),
    linear-gradient(90deg, var(--cyan), var(--violet) 55%, #f0b89a); }
.try-blend-range::-moz-range-track { height: 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  background: linear-gradient(90deg, transparent calc(var(--thumb) / 2 + var(--v) * (100% - var(--thumb))), rgba(6, 11, 24, .72) 0),
    linear-gradient(90deg, var(--cyan), var(--violet) 55%, #f0b89a); }
.try-blend-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--thumb); height: var(--thumb);
  margin-top: calc(4px - var(--thumb) / 2); border: 0; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 4px rgba(34, 211, 238, .22), 0 0 18px -2px rgba(34, 211, 238, .8); transition: box-shadow .2s; }
.try-blend-range::-moz-range-thumb { width: var(--thumb); height: var(--thumb); border: 0; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 4px rgba(34, 211, 238, .22), 0 0 18px -2px rgba(34, 211, 238, .8); transition: box-shadow .2s; }
.try-blend-range:hover::-webkit-slider-thumb, .try-blend-range:active::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(34, 211, 238, .3), 0 0 22px rgba(34, 211, 238, .9); }
.try-blend-range:hover::-moz-range-thumb, .try-blend-range:active::-moz-range-thumb { box-shadow: 0 0 0 6px rgba(34, 211, 238, .3), 0 0 22px rgba(34, 211, 238, .9); }
.try-tabs { display: flex; gap: 4px; margin: 22px 0 18px; border-bottom: 1px solid var(--line); }
.try-tabs [role=tab] { border: 0; background: none; color: var(--muted); font: 600 0.95rem var(--display); padding: 10px 14px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.try-tabs [role=tab]:hover { color: var(--text); }
.try-tabs [role=tab][aria-selected="true"] { color: var(--text); border-bottom-color: var(--cyan); }
.try-tabpanel h3 { margin: 22px 0 10px; font-size: 0.78rem; font-family: var(--mono); font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); }
.try-tabpanel h3:first-child { margin-top: 4px; }
.try-tabpanel .fine { margin-top: 10px; }
.try-tabpanel .fine.first { margin-top: 0; }

.try-faces { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.try-face, .try-voice, .try-tooth { display: grid; gap: 6px; justify-items: center; padding: 6px 6px 8px; border-radius: 16px;
  border: 1px solid var(--line); background: rgba(13, 22, 48, .55); color: var(--muted); font: 500 0.82rem var(--body); cursor: pointer; }
.try-face:hover, .try-voice:hover, .try-tooth:hover { border-color: rgba(34, 211, 238, .45); color: var(--text); }
.try-face.on, .try-voice.on, .try-tooth.on { border-color: rgba(34, 211, 238, .8); color: var(--text); box-shadow: 0 0 22px -8px rgba(34, 211, 238, .8); }
.try-voice:disabled { opacity: .45; cursor: not-allowed; }
.try-face img, .try-plus { width: 100%; aspect-ratio: 1; border-radius: 12px; object-fit: cover; background: #0a1226; }
.try-plus { display: grid; place-items: center; font: 300 2rem var(--display); color: var(--cyan); border: 1px dashed var(--line-2); }

.try-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.try-swatch { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; border: 2px solid transparent;
  background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.try-swatch.on { border-color: #fff; box-shadow: 0 0 16px -4px var(--a); }
.try-slider { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 3.2rem; align-items: center; gap: 12px; margin: 6px 0; color: var(--muted); font-size: 0.92rem; }
.try-slider input { width: 100%; accent-color: var(--cyan); }
.try-slider output { font: 500 0.8rem var(--mono); color: var(--text); text-align: right; }
.try-teeth { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.try-tooth img { width: 100%; height: 40px; object-fit: contain; }
.try-checks { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; }
.try-check { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.92rem; cursor: pointer; margin-top: 10px; }
.try-checks .try-check { margin-top: 0; }
.try-check input { accent-color: var(--cyan); width: 16px; height: 16px; }

.try-voices { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; }
.try-voice img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.try-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.try-chip { border: 1px solid var(--line-2); background: rgba(13, 22, 48, .55); color: var(--muted); border-radius: 999px;
  padding: 6px 12px; font: 500 0.84rem var(--body); cursor: pointer; }
.try-chip:hover { color: var(--text); border-color: rgba(34, 211, 238, .5); }
.try-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }

.try-seg-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: 12px; margin: 12px 0; color: var(--muted); font-size: 0.92rem; }
.try-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.try-seg button { border: 1px solid var(--line-2); background: rgba(13, 22, 48, .55); color: var(--muted); border-radius: 9px;
  padding: 6px 10px; font: 500 0.82rem var(--body); cursor: pointer; }
.try-seg button.on { color: var(--text); border-color: rgba(34, 211, 238, .8); background: rgba(34, 211, 238, .1); }
.try-seg-row select { justify-self: start; max-width: 100%; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--line-2);
  background: #0a1226; color: var(--text); font: 500 0.86rem var(--body); }
.try-code { width: 100%; margin-top: 8px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line-2);
  background: #050916; color: #c7d2fe; font: 0.8rem/1.55 var(--mono); resize: vertical; }
.try-copied { color: var(--cyan); font-size: 0.88rem; }
.try-note { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(253, 230, 138, .3);
  background: rgba(253, 230, 138, .06); color: #fde68a; font-size: 0.9rem; }
.try-note a { color: inherit; }
.try-tabpanel .code { margin-top: 4px; }
.try-tabpanel .code pre { font-size: 0.78rem; padding: 14px 16px; }

@media (max-width: 900px) {
  .try-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "stage" "blend" "head" "panel"; }
  .try-facecol { position: relative; top: 0; }
  .try-stage { max-height: 62vh; margin-inline: auto; }
  .try-blend { margin: 12px 0 26px; }
}
@media (max-width: 420px) {
  .try-blend { padding: 10px 14px 8px; }
  .try-sub { font-size: 0.88rem; padding: 6px 10px; }
  .try-slider { grid-template-columns: 6rem minmax(0, 1fr) 2.8rem; gap: 8px; }
  .try-seg-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* the hidden attribute wins over the display set above */
.try-drop[hidden], .try-sub[hidden], .try-talk [hidden] { display: none; }