:root {
  color-scheme: light dark;
  /* dark (default) */
  --bg: #0b0b0f;
  --fg: #e8e8ee;
  --muted: #8a8a99;
  --faint: #4a4a58;
  --accent: #7c9cff;
  --on-accent: #0b0b0f;
  --surface: rgba(255, 255, 255, .05);
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .22);
  --face-hi: rgba(255, 255, 255, .09);
  --face-lo: rgba(255, 255, 255, .015);
  --face-shadow: none;
  --chip: #15151c;
  --veil: rgba(11, 11, 15, .86);
  --danger: #ff7c8a;
  --toast-bg: #23161a;
  --toast-fg: #ffd0d6;
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 22%, transparent);
  --d: 128px; /* base circle diameter */
}

/* light: follows the system appearance automatically */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f5f5f8;
    --fg: #17171e;
    --muted: #6b6b7b;
    --faint: #a6a6b4;
    --accent: #4a6cf7;
    --on-accent: #ffffff;
    --surface: rgba(0, 0, 0, .04);
    --line: rgba(0, 0, 0, .08);
    --line-strong: rgba(0, 0, 0, .2);
    --face-hi: rgba(255, 255, 255, 1);
    --face-lo: rgba(255, 255, 255, .7);
    --face-shadow: 0 1px 2px rgba(20, 20, 40, .06), 0 8px 24px rgba(20, 20, 40, .06);
    --chip: #ffffff;
    --veil: rgba(245, 245, 248, .9);
    --danger: #e0445a;
    --toast-bg: #fff0f2;
    --toast-fg: #8a1f2e;
  }
}

* { box-sizing: border-box; }

html, body {
  overscroll-behavior: none;     /* no rubber-band: vertical swipes page the circles */
  touch-action: manipulation;    /* no double-tap zoom delay */
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.4 -apple-system, system-ui, "SF Pro Text", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  user-select: none;
  cursor: text; /* every empty place is a place to write */
}

/* ---------- header ---------- */

#top {
  position: fixed;
  inset: 0 0 auto 0;
  padding: calc(14px + env(safe-area-inset-top)) 28px 0;
  text-align: center;
  pointer-events: none;
  z-index: 3;
}
#path {
  min-height: 18px;
  font-size: 12px;
  color: var(--faint);
  letter-spacing: .02em;
}
#path span + span::before { content: "  ›  "; white-space: pre; }
#title {
  margin: 10px 0 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.01em;
}
#title:empty, #message:empty { display: none; }
#message {
  margin: 8px auto 0;
  max-width: 640px;
  color: var(--muted);
  font-size: 14px;
}

/* ---------- stage ---------- */

#stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 110px 40px 120px;
}

#circles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: safe center;
  gap: 34px 30px;
  max-width: 1080px;
  max-height: 100%;
  overflow: hidden;
  padding: 24px;
}

.circle {
  --s: 1;
  position: relative;
  width: calc(var(--d) * var(--s));
  height: calc(var(--d) * var(--s));
  flex: none;
  cursor: pointer;
  animation: appear .38s cubic-bezier(.2, .9, .3, 1.2) both;
  animation-delay: calc(var(--i) * 28ms);
}
@keyframes appear {
  from { opacity: 0; transform: scale(.6); }
}
.circle.leaving {
  animation: leave .22s ease-in forwards;
}
@keyframes leave {
  to { opacity: 0; transform: scale(.4); }
}

.face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(120% 120% at 30% 20%, var(--face-hi), var(--face-lo) 60%),
    var(--bg);
  border: 1px solid var(--line);
  box-shadow: var(--face-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s;
}

.circle:active .face { transform: scale(.97); }

.circle.selected .face {
  border-color: var(--accent);
  background:
    radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--accent) 28%, transparent), color-mix(in srgb, var(--accent) 6%, transparent) 60%),
    var(--bg);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 0 40px var(--accent-glow);
}

.icon { font-size: calc(30px * var(--s)); line-height: 1; margin-bottom: 7px; }
.label {
  font-size: calc(15px * min(var(--s), 1.15));
  font-weight: 560;
  line-height: 1.15;
}
.hint {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.2;
  max-width: 90%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.value {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

/* ears: left × reduces/removes, right + adds/selects/increases */
.ear {
  position: absolute;
  top: 4%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--chip);
  color: var(--muted);
  font: 600 16px/1 system-ui;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  opacity: .0;
  transform: scale(.7);
  transition: opacity .15s, transform .15s, color .15s, background .15s, border-color .15s;
  z-index: 2;
}
.ear.minus { left: 2%; }
.ear.plus  { right: 2%; }
.circle.selected .ear { opacity: 1; transform: scale(1); }



/* ---------- focus ring (keyboard), typed text, suggestions ---------- */

.circle.focused .face {
  outline: 2.5px solid var(--accent);
  outline-offset: 6px;
}
.circle.focused .ear { opacity: 1; transform: scale(1); }
.circle.typed .face { border: 1.5px dashed var(--accent); }
.circle.typed .ear { display: none; }
.circle.suggested .face { border-style: dashed; }

/* ---------- pages: More / Back ---------- */

/* One centered group: only the buttons present take space. */
#nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  width: 100%;
  pointer-events: none;
}
.page {
  pointer-events: auto;
  height: 40px;
  padding: 0 18px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--chip);
  color: var(--muted);
  font: 560 14px/1 -apple-system, system-ui;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s, color .15s, border-color .15s;
}
.page:not(.on) { display: none; }
.page.on { visibility: visible; opacity: 1; }

#more.loading { color: var(--accent); border-color: var(--accent-glow); animation: breathe 1.1s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 6px var(--accent-soft); } }


/* ---------- busy ---------- */

/* While a circle opens, the rest stays usable (clicking another one switches to it). */
body.busy .circle:not(.pending) { opacity: .8; transition: opacity .3s; }
.progress {
  margin-top: 5px;
  max-width: 86%;
  font-size: 10.5px;
  line-height: 1.2;
  color: var(--accent);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.circle.pending .hint { display: none; }
.circle.pending .face {
  border-color: var(--accent);
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  50% { box-shadow: 0 0 0 10px var(--accent-soft), 0 0 60px var(--accent-glow); }
}

/* ---------- AI-generated view (2nd level) ---------- */

#view {
  position: absolute;
  inset: 0;
  bottom: 0;
  display: none;
}
#view iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}
body.mode-html #view { display: block; }
body.mode-html #circles { display: none; }
body.mode-html #stage { padding: 0; }
body.mode-html #top { padding-bottom: 6px; }
body.busy #view { opacity: .7; transition: opacity .3s; }

/* ---------- the text input (under the title, or in its place) ---------- */

#write {
  display: none;
  pointer-events: auto;
  width: min(760px, 86vw);
  margin: 10px auto 0;
  padding: 6px 8px 8px;
  border: 0;
  border-bottom: 1.5px solid var(--accent);
  outline: none;
  resize: none;
  overflow: hidden;
  background: transparent;
  color: var(--fg);
  caret-color: var(--accent);
  font: 400 22px/1.4 -apple-system, system-ui, sans-serif;
  text-align: center;
  user-select: text;
}
#write::placeholder { color: var(--faint); font-size: 15px; }
body.typing #write { display: block; }
body.typing:not(.has-title) #write { margin-top: 14px; }
/* AI text screens: a larger, left-aligned writing area */
body.typing-text #write {
  min-height: 34vh;
  text-align: left;
  font-size: 18px;
  line-height: 1.55;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  overflow: auto;
}

#close {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  right: 18px;
  z-index: 7;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--chip);
  color: var(--muted);
  font: 500 20px/1 system-ui;
  cursor: pointer;
  display: none;
}

body.typing #close { display: block; }
body.suggesting #status { opacity: 1; }

/* ---------- bottom ---------- */

#bottom {
  position: fixed;
  inset: auto 0 0 0;
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 28px;
  gap: 12px;
  pointer-events: none;
  z-index: 4;
}
#status {
  max-width: 70%;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 16px;
  opacity: 0;
  transition: opacity .2s;
}
body.busy #status, body.flash #status { opacity: 1; }

#go {
  pointer-events: auto;
  min-width: 108px;
  height: 46px;
  padding: 0 28px;
  border-radius: 23px;
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  font: 650 16px/1 -apple-system, system-ui;
  cursor: pointer;
  box-shadow: 0 8px 30px var(--accent-glow);
  transition: transform .15s, opacity .2s, filter .15s;
  display: none;
}

#go:active { transform: scale(.97); }
body.show-go #go { display: block; animation: appear .3s both; }
body.busy #go { opacity: .6; }

/* ---------- toast ---------- */

#toast {
  position: fixed;
  left: 50%;
  bottom: 130px;
  transform: translateX(-50%) translateY(10px);
  max-width: 70%;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--toast-bg);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  color: var(--toast-fg);
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 10;
  user-select: text;
}
#toast.on { opacity: 1; transform: translateX(-50%); pointer-events: auto; }

/* ---------- web version note ---------- */

#webnote { display: none; }
html.web #webnote {
  display: block;
  position: fixed;
  left: 18px;
  bottom: 14px;
  z-index: 4;
  font-size: 11px;
  color: var(--faint);
  text-decoration: none;
}
html.web #webnote:hover { color: var(--accent); }

/* ---------- cursor heading, prefetched, improved ---------- */

.circle.heading .face { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.circle.ready .face::after {
  content: '';
  position: absolute;
  bottom: 4%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .8;
}
.circle.improved .face { animation: improved 1.2s ease-out; }
@keyframes improved { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 40% { box-shadow: 0 0 0 10px var(--accent-soft); } }

/* ---------- hover only where there is real hover (not touch) ---------- */

@media (hover: hover) and (pointer: fine) {
  .circle:hover .face {
    transform: scale(1.04);
    border-color: var(--line-strong);
  }
  .ear.minus:hover { color: var(--danger); border-color: var(--danger); }
  .ear.plus:hover  { color: var(--accent); border-color: var(--accent); }
  .page:hover { color: var(--accent); border-color: var(--accent); }
  #close:hover { color: var(--danger); border-color: var(--danger); }
  #go:hover { filter: brightness(1.08); transform: translateY(-1px); }
  .circle:hover .ear { opacity: 1; transform: scale(1); }
}

/* Touch: ears always visible (there is no hover to reveal them). */
@media (hover: none) {
  .ear { opacity: .85; transform: scale(1); }
  html, body { cursor: auto; }
  .circle { -webkit-tap-highlight-color: transparent; }
}

/* ---------- phones ---------- */

#bottom { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
@media (max-width: 520px) {
  :root { --d: 104px; }
  #stage { padding-left: 10px; padding-right: 10px; }
  #circles { gap: 22px 16px; padding: 16px 14px; }
  .hint { font-size: 10px; -webkit-line-clamp: 1; max-width: 82%; }
  #title { font-size: 22px; }
}

/* ---------- someone else? ---------- */

#who {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  padding: 4px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  background: var(--chip);
  color: var(--danger);
  font: 600 12px/1.4 -apple-system, system-ui;
  cursor: pointer;
}
#who[hidden] { display: none; }

/* ---------- text that fits the circle ---------- */

.label {
  max-width: 92%;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.circle.long .icon { margin-bottom: 4px; font-size: calc(26px * var(--s)); }
.circle.longer .label { font-size: calc(13px * min(var(--s), 1.15)); }
.circle.longer .hint { display: none; }

/* ---------- full screen ---------- */

#full {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  right: 18px;
  z-index: 8;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--chip);
  color: var(--accent);
  font: 600 16px/1 system-ui;
  cursor: pointer;
}
#full[hidden] { display: none; }
body.typing #full { right: 60px; }
body.immersive #top, body.immersive #bottom, body.immersive #webnote, body.immersive #who { display: none; }
body.immersive #stage { padding: 12px; }
body.immersive #full { opacity: .35; }
body.immersive #full:hover { opacity: 1; }

/* ---------- interim screen while the full one is on its way ---------- */

body.updating #status { opacity: 1; }
body.updating #title::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 10px;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse-dot 1.1s ease-in-out infinite;
}
@keyframes pulse-dot { 50% { opacity: .25; transform: scale(.7); } }

.expect {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--chip);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

/* A view under its UI test: laid out at full size, not yet shown. */
#view iframe.testing { visibility: hidden; }

/* The lab: hidden clones of views where every interaction is exercised (laid out, off screen). */
#lab { position: fixed; left: -30000px; top: 0; pointer-events: none; }
#lab iframe { width: 100%; height: 100%; border: 0; }