:root {
  --bg: #07080c;
  --glass: rgba(16, 18, 26, 0.72);
  --line: rgba(255, 255, 255, 0.12);
  --text: #f2efe8;
  --muted: rgba(242, 239, 232, 0.62);
  --accent: #a99cff;
  --coach: #e7c9a0;
  --partner: #f0b6c4;
  --you: #a8d8c8;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; }
[hidden] { display: none !important; }
#stage { position: fixed; inset: 0; }
#stage canvas { display: block; cursor: grab; }
#stage canvas:active { cursor: grabbing; }

.glass { background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 18px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
.primary { background: var(--accent); color: #14121f; font-weight: 600; padding: 11px 20px; border-radius: 12px; }
.ghost { background: rgba(255, 255, 255, 0.08); padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line); }
.ghost:hover { background: rgba(255, 255, 255, 0.14); }
.row { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-top: 16px; flex-wrap: wrap; }
kbd { font: 11px ui-monospace, monospace; opacity: 0.7; border: 1px solid var(--line); border-radius: 4px; padding: 1px 4px; margin-left: 6px; }

.banner { position: fixed; top: 0; left: 0; right: 0; padding: 8px 16px; background: #5a4a14; color: #fff3c4; font-size: 13px; text-align: center; z-index: 50; }

/* Bottom: captions + controls */
#bottom { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(760px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 10px; z-index: 10; }
.captions { min-height: 64px; padding: 14px 20px; text-align: center; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9); }
#cap-speaker { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
#cap-text { font-size: 21px; line-height: 1.4; }
.captions.coach #cap-speaker { color: var(--coach); }
.captions.partner #cap-speaker { color: var(--partner); }
.captions.you #cap-speaker { color: var(--you); }
.captions.system #cap-text { font-size: 16px; color: var(--muted); }
.captions.soft #cap-text { font-style: italic; opacity: 0.85; }
#interim { text-align: center; color: var(--you); font-size: 15px; min-height: 18px; opacity: 0.85; }
#thinking { display: inline-flex; gap: 5px; margin-top: 6px; }
#thinking span { width: 6px; height: 6px; border-radius: 50%; background: var(--coach); animation: pulse 1.2s infinite ease-in-out; }
#thinking span:nth-child(2) { animation-delay: 0.15s; }
#thinking span:nth-child(3) { animation-delay: 0.3s; }
@keyframes pulse { 0%, 100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }

#controls { display: flex; align-items: center; gap: 10px; padding: 8px; }
#mic { width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: grid; place-items: center; flex: none; transition: background 0.2s; }
#mic[data-state="listening"] { background: #d0584f; box-shadow: 0 0 0 0 rgba(208, 88, 79, 0.6); animation: ring 1.4s infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(208, 88, 79, 0.55); } 100% { box-shadow: 0 0 0 14px rgba(208, 88, 79, 0); } }
#say { flex: 1; min-width: 0; }
#say-input { width: 100%; background: transparent; border: 0; outline: 0; color: var(--text); font: inherit; font-size: 15px; padding: 10px 6px; }
.toggle { font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: center; white-space: nowrap; }

/* Ladder */
#side { position: fixed; top: 20px; right: 20px; width: 280px; padding: 16px 18px; z-index: 5; }
#side h2 { margin: 0 0 6px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
#ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; gap: 6px; }
#ladder li { display: grid; grid-template-columns: 22px 1fr 24px; gap: 8px; align-items: start; font-size: 14px; padding: 7px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
#ladder li.current { background: rgba(169, 156, 255, 0.22); outline: 1px solid rgba(169, 156, 255, 0.5); }
#ladder li.empty { display: block; color: var(--muted); font-size: 13px; background: none; }
#ladder .n { color: var(--muted); font-variant-numeric: tabular-nums; }
#ladder .p { text-align: right; color: var(--coach); font-variant-numeric: tabular-nums; }
#ladder .done { font-size: 12px; color: var(--you); margin-top: 3px; }

/* Exposure HUD */
#practice, #exit { display: none; }
body.in-exposure #practice { display: block; position: fixed; top: 20px; left: 20px; width: 300px; padding: 14px 16px; z-index: 5; }
body.in-exposure #exit { display: block; position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: rgba(120, 40, 40, 0.75); padding: 9px 16px; border-radius: 999px; z-index: 6; border: 1px solid rgba(255, 255, 255, 0.15); }
body.in-exposure #side { opacity: 0.5; }
body.in-exposure #end { display: none; }
#practice-title { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
#practice-text { font-size: 15px; line-height: 1.4; }
.alone-row { display: none; margin-top: 10px; font-size: 13px; color: var(--muted); justify-content: space-between; }
body.alone .alone-row { display: flex; }
body.alone #say-input::placeholder { color: var(--you); }

/* Modals */
.modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.35); z-index: 30; padding: 16px; }
.card { width: min(560px, 100%); padding: 24px 26px; max-height: calc(100vh - 32px); overflow: auto; }
.card h1 { margin: 0 0 10px; font-weight: 600; letter-spacing: -0.01em; }
.card h2 { margin: 0 0 14px; font-size: 18px; }
.card h3 { margin: 18px 0 6px; font-size: 14px; color: var(--muted); }
.card p { line-height: 1.5; }
#welcome { background: radial-gradient(ellipse at 50% 120%, #2a2340 0%, #07080c 70%); }
#suds { background: rgba(0, 0, 0, 0.2); place-items: end center; padding-bottom: 170px; }
#suds .card { width: min(620px, 100%); }
#suds-prompt { font-size: 19px; margin-bottom: 12px; }
.scale-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
#suds-buttons { display: grid; grid-template-columns: repeat(11, 1fr); gap: 6px; }
#suds-buttons button { padding: 12px 0; border-radius: 10px; font-weight: 600; font-variant-numeric: tabular-nums; background: color-mix(in srgb, #5fb59a calc((1 - var(--k)) * 100%), #d0584f); color: #101015; }
#suds-buttons button:hover { filter: brightness(1.15); transform: translateY(-1px); }

.setup label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.setup input, .setup textarea, .setup select { font: inherit; font-size: 15px; color: var(--text); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; }
.setup select option { color: #111; }
.setup .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
.setup .inline { display: flex; gap: 6px; }
.setup .inline select { flex: 1; min-width: 0; }
.setup label.check { flex-direction: row; align-items: flex-start; gap: 10px; color: var(--text); font-size: 14px; }
.setup label.check input { margin-top: 3px; }
.vr-button { font: inherit !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid var(--line) !important; border-radius: 10px !important; padding: 9px 14px !important; width: auto !important; opacity: 1 !important; }

@media (max-width: 760px) {
  #side { display: none; }
  #cap-text { font-size: 17px; }
  .setup .grid { grid-template-columns: 1fr; }
  body.in-exposure #practice { width: auto; right: 16px; left: 16px; top: 64px; }
  .toggle { display: none; }
}

/* Profiles + memory on the start page */
.who-label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.profiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.profiles button { padding: 14px 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.profiles button .av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #14121f; background: var(--c); }
.profiles button .meta { font-size: 11px; color: var(--muted); }
.profiles button[aria-pressed="true"] { background: rgba(169, 156, 255, 0.2); border-color: rgba(169, 156, 255, 0.7); }
.memory { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); font-size: 14px; line-height: 1.5; min-height: 46px; }
.memory b { color: var(--coach); font-weight: 600; }
.memory .last { color: var(--muted); font-size: 13px; margin-top: 4px; }
.start-row { justify-content: flex-start; }
.danger { background: #b8463f; color: #fff; font-weight: 600; padding: 11px 18px; border-radius: 12px; }
.danger:hover { filter: brightness(1.1); }
#forget { color: var(--muted); }

/* Progress through a rep */
#progress { display: none; }
body.in-exposure #progress { display: block; position: fixed; top: 64px; left: 50%; transform: translateX(-50%); width: min(420px, calc(100vw - 32px)); padding: 10px 14px 8px; z-index: 6; }
#progress-label { font-size: 13px; text-align: center; margin-bottom: 7px; font-variant-numeric: tabular-nums; }
#progress .track { position: relative; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
#progress-fill { height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #a99cff, #e7c9a0); transition: width 0.5s linear; }
#progress .track i { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(7, 8, 12, 0.7); }
#progress .steps { position: relative; height: 14px; margin-top: 4px; font-size: 10px; color: var(--muted); letter-spacing: 0.04em; }
#progress .steps span { position: absolute; }
#progress .steps span:nth-child(1) { left: 0; }
#progress .steps span:nth-child(2) { left: 10%; margin-left: 4px; }
#progress .steps span:nth-child(3) { left: 35%; margin-left: 4px; }
#progress .steps span:nth-child(4) { right: 0; }
@media (max-width: 760px) { body.in-exposure #progress { top: auto; bottom: 190px; } .profiles button { padding: 10px 4px; } }