/* App-only Violet, Coral and Cloud. Every selector is scoped: this stylesheet may remain loaded after navigation to a public page. Its exact bytes determine the filename. */
/* The active app scopes the gate and body-portaled toast as well as its own controls. */
.experience, .experience-account, .experience-simple-lines, html:has(:is(.experience, .experience-account, .experience-simple-lines)), html:has(:is(.experience, .experience-account, .experience-simple-lines)) dialog {
  --experience-ink: #25233d;
  --experience-ivory: #f5f3ff;
  --experience-paper: #ffffff;
  --experience-amber: #6554e8;
  --experience-coral: #ff867c;
  --experience-peach: #ffe9e5;
  --experience-muted: #68627b;
  --experience-copy: #68627b;
  --experience-border: #ded9ed;
  --experience-soft: #e9e4ff;
  --color-accent: #5442c9; --color-lime: #6554e8; --color-on-lime: #ffffff;
  --color-blue: #e9e4ff; --color-on-blue: #25233d;
  --color-ink: #25233d; --color-muted: #68627b;
  --color-page: #f5f3ff; --color-band: #eeeaf8; --color-surface: #ffffff; --color-raised: #eeeaf8;
  --color-line: #ded9ed; --color-line-strong: #817990; --color-best: #fff4f0;
  --color-her: #f0edf8; --color-on-her: #25233d;
  --color-success: #27664e; --color-danger: #a83250;
  --color-tone-fill: #e9e4ff; --color-tone-ink: #4f3cb5;
  --color-good-fill: #def5ec; --color-good-ink: #27664e;
  --color-bad-fill: #fce7ed; --color-bad-ink: #a83250;
  --shadow-lime: 0 6px 16px #6554e82b; --shadow-lime-hover: 0 9px 22px #6554e83d;
  --shadow-sheet: 0 22px 60px #25233d29; --shadow-pop: 0 14px 36px #25233d24;
}
.experience {
  display: flow-root; min-height: 100svh; font-size: 16px; line-height: 1.5;
  color: var(--color-ink); color-scheme: light; background: var(--experience-ivory);
}

/*
 * /app has no sticky header: a revealed target lands at the top. No pull-to-refresh: a reload would drop the attached
 * screenshots. While the tab bar shows, the phone's ActionDocks stick above it: app-client.tsx measures the bar into
 * --dock-bottom on <html> (the phone scroll padding counts it too). Typing hides the bar (it then measures 0) and the
 * docks ride the keyboard.
 */
html:has(.experience) { scroll-padding-top: 8px; overscroll-behavior-y: contain; }
.experience:has(.experience-frame :is(textarea, input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"])):focus) .experience-bottom { display: none; }
.experience .experience-frame {
  width: 100%; max-width: 760px; min-height: 100svh; margin: auto;
  position: relative; padding-bottom: 88px;
}
/* The composer is a pushed step: no tab bar under it. */
.experience:has(.experience-compose:not([hidden])) .experience-frame { padding-bottom: 24px; }
.experience :is(h1, h2, h3), .experience .experience-button { overflow-wrap: break-word; }
.experience.experience-dark {
  --color-ink: #ffffff; --color-muted: #c4bfda;
  --color-surface: #302c4e; --color-raised: #3d365d;
  --color-line: #50496c; --color-line-strong: #a49aba;
  --color-lime: #6554e8; --color-on-lime: #ffffff; --color-accent: #d5ceff;
  --experience-amber: #d5ceff;
  --color-danger: #ffc5d4;
  color: var(--experience-paper); color-scheme: dark; background: var(--experience-ink);
}
.experience.experience-dark .experience-frame { max-width: 620px; padding-bottom: 0; }
.experience.experience-dark:has(.calibration-result) {
  --color-ink: #25233d; --color-muted: #68627b; --color-accent: #25233d;
  background: var(--experience-peach); color: var(--experience-ink); color-scheme: light;
}
.experience .experience-header {
  height: 84px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 23px; position: relative; z-index: 3;
}
.experience .experience-icon {
  width: 44px; min-width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; background: transparent; border-radius: 12px; font-size: 29px;
  line-height: 1; cursor: pointer; color: inherit;
}
.experience .experience-icon:hover { background: #6554e80d; }
.experience .experience-icon:focus-visible, .experience button:focus-visible, .experience a:focus-visible {
  outline: 3px solid var(--color-accent); outline-offset: 3px;
}
.experience .header-spacer { width: 44px; }
.experience .wide-title { font-weight: 800; letter-spacing: -0.045em; line-height: 1.08; text-wrap: balance; }
.experience .experience-header .wide-title { font-size: clamp(17px, 4.3vw, 23px); }
.experience .experience-wordmark {
  font-size: 28px; line-height: 1; letter-spacing: -0.075em; font-weight: 850;
  font-style: normal; color: inherit; position: relative; white-space: nowrap;
}
.experience .experience-wordmark:after {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 2px;
  margin-left: 3px; background: var(--experience-amber); transform: translateY(-15px);
}
/* The composer's title takes the wordmark's place. */
.experience .experience-header-title {
  flex: 1; min-width: 0; margin: 0; text-align: center; font-size: 17px; font-weight: 750; line-height: 1.25;
  letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.experience .quiet-button {
  border: 0; background: transparent; color: inherit; min-height: 44px; padding: 10px;
  font-size: 14px; font-weight: 600; cursor: pointer; text-align: center;
}
.experience .calibration-welcome {
  min-height: calc(100svh - 84px); display: flex; flex-direction: column;
  align-items: stretch; padding: 0 25px 28px; position: relative; overflow: hidden;
}
.experience .calibration-art { position: relative; margin: 18px 0 29px; }
.experience .calibration-mini-phone {
  position: relative; left: 6%; width: 88%; padding: 25px 21px;
  border: 1px solid #615a7b; border-radius: 26px; background: #302c4e;
  transform: rotate(-3deg); overflow: hidden; box-shadow: 0 18px 35px #00000020;
}
.experience .mini-heading {
  display: flex; justify-content: space-between; gap: 15px; align-items: center;
  color: var(--experience-amber); font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
}
.experience .mini-progress { display: flex; gap: 5px; margin: 18px 0 20px; }
.experience .mini-progress i { flex: 1; height: 3px; background: #5e547d; border-radius: 4px; }
.experience .mini-progress i:first-child { background: var(--experience-amber); }
.experience .calibration-mini-phone p { font-size: 10px; color: #c4bfda; margin: 0 0 8px; }
.experience .calibration-mini-phone strong { display: block; font-size: clamp(17px, 4.3vw, 22px); line-height: 1.2; letter-spacing: -0.025em; }
.experience .mini-options { display: flex; gap: 8px; margin-top: 20px; }
.experience .mini-options span {
  flex: 1; min-width: 0; border-radius: 12px; padding: 12px; font-size: 10px; line-height: 1.5;
  min-height: 90px; background: #453b64; color: var(--experience-paper);
}
.experience .mini-options span + span { background: var(--experience-soft); color: var(--experience-ink); }
.experience .calibration-seal {
  position: absolute; right: 0; top: 54%; width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center; background: var(--experience-amber); color: var(--experience-ink);
  box-shadow: 0 8px 20px #0002; transform: rotate(6deg);
}
.experience .welcome-copy { position: relative; text-align: left; z-index: 1; padding: 0 0 20px; }
.experience .welcome-copy h1 { font-size: clamp(35px, 9vw, 51px); margin: 0 0 16px; max-width: 430px; }
.experience .welcome-copy p { font-size: 16px; line-height: 1.6; color: #c4bfda; max-width: 380px; }
.experience .calibration-actions { display: grid; gap: 11px; margin-top: auto; padding-top: 24px; position: relative; z-index: 1; }
.experience.experience-dark .calibration-actions .experience-button.white {
  background: var(--experience-amber); border-color: var(--experience-amber); color: var(--experience-ink);
}
.experience .calibration-quiz { min-height: calc(100svh - 84px); display: flex; flex-direction: column; padding: 25px 25px 28px; }
.experience .calibration-dots { display: flex; gap: 7px; align-items: center; }
.experience .calibration-dots span { width: 7px; height: 7px; border-radius: 20px; background: #675a86; transition: width 0.25s; }
.experience .calibration-dots span.current { width: 31px; background: var(--experience-amber); }
.experience .quiz-question { text-align: left; min-height: 142px; animation: experience-enter 0.3s both; }
.experience .quiz-question p { color: #c4bfda; font-size: 13px; margin-bottom: 16px; }
.experience .quiz-question h1 { font-size: clamp(27px, 7.3vw, 37px); font-weight: 750; line-height: 1.13; letter-spacing: -0.04em; }
.experience .calibration-choices { display: flex; flex-wrap: wrap; gap: 12px; padding: 17px 0 10px; }
.experience .calibration-choice {
  flex: 1 1 9em; min-width: 0; min-height: clamp(182px, 26svh, 235px); overflow-wrap: break-word;
  border-radius: 20px; border: 1px solid #8f81a7; background: #342d50;
  padding: 19px 16px; display: flex; flex-direction: column; justify-content: space-between;
  gap: 24px; color: var(--experience-paper); text-align: left; cursor: pointer;
  font-size: clamp(14px, 3.85vw, 18px); line-height: 1.45; font-weight: 600;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.experience .calibration-choice.selected {
  color: var(--experience-ink); background: var(--experience-paper);
  border-color: var(--experience-amber); box-shadow: 0 0 0 2px var(--experience-amber); transform: translateY(-3px);
}
.experience .choice-number { font-weight: 500; font-size: 17px; opacity: 0.65; font-variant-numeric: tabular-nums; }
.experience .quiz-heart { text-align: center; margin-top: auto; padding: 24px 0 0; color: #c4bfda; font-size: 13px; }
.experience .quiz-heart span {
  display: block; margin-top: 10px; font-size: 28px; line-height: 1;
  background: linear-gradient(to top, #ff867c 0 var(--heart-fill), #675a86 var(--heart-fill) 100%);
  background-clip: text; color: transparent; transition: background 0.25s;
}
.experience .calibration-result {
  min-height: calc(100svh - 84px); padding: 44px 25px 28px; display: flex; flex-direction: column; text-align: left;
}
.experience .result-eyebrow { color: #68627b; font-size: 12px; font-weight: 650; margin: 0 0 18px; letter-spacing: 0.035em; }
.experience .calibration-result h1 { font-size: clamp(30px, 8vw, 46px); margin-bottom: 30px; }
.experience .style-reveal { display: inline-block; margin-top: 13px; animation: experience-enter 0.4s 0.1s both; }
.experience .calibration-result ul { display: grid; gap: 10px; text-align: left; margin-bottom: 22px; }
.experience .calibration-result li {
  background: #ffffff; border: 1px solid #ded9ed; padding: 17px 16px; border-radius: 17px;
  display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; animation: experience-enter 0.35s both;
}
.experience .calibration-result li span { flex-shrink: 0; font-size: 0; line-height: 22px; }
.experience .calibration-result li span:after { content: "✓"; font-size: 17px; font-weight: 750; color: #5442c9; }
.experience .style-note { font-size: 12px; line-height: 1.6; color: #68627b; margin: auto 0 24px; }
.experience .calibration-result > .experience-button.white { background: var(--experience-ink); color: var(--experience-paper); border-color: var(--experience-ink); }
/* "Let's go" stays in reach when the traits run long. */
.experience .calibration-result > .experience-button { position: sticky; bottom: 12px; }
.experience .experience-home {
  display: flex; flex-direction: column; align-items: stretch;
  padding: 18px 25px 24px; max-width: 530px; margin: auto;
}
.experience .experience-home h1 {
  font-size: clamp(28px, min(7.6vw, 7svh), 46px); font-weight: 780; letter-spacing: -0.055em;
  line-height: 1.09; text-align: left; margin: 0; white-space: pre-line;
}
.experience .home-lead { color: var(--experience-copy); font-size: 14px; line-height: 1.55; margin: 12px 0 0; max-width: 420px; }
.experience .profile-tag {
  display: flex; align-items: center; justify-content: center; align-self: center; gap: 8px;
  border: 1px solid var(--experience-border); background: transparent; border-radius: 999px;
  padding: 8px 16px; min-height: 44px; font-size: 12px; font-weight: 650; cursor: pointer; margin: 16px 0 0;
}
.experience .profile-tag span { color: #5442c9; }
.experience .home-actions { width: 100%; margin-top: 22px; display: grid; gap: 11px; }
.experience .home-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.experience .home-secondary .experience-button { font-size: 12px; padding: 11px; min-height: 48px; background: transparent; }
.experience .home-actions > p { font-size: 12px; line-height: 1.5; text-align: center; color: var(--experience-copy); margin-top: 1px; }
.experience .experience-home .chat-collage { margin: 22px auto 0; }
/* The illustration's small labels stay readable (12 px floor). */
.experience .chat-collage :is(.collage-contact > div > span, .suggestion-label) { font-size: 12px; }
/* Recent conversations are the Home content. Its three entry actions stay in thumb reach. */
.experience .experience-home {
  min-height: calc(100svh - 172px); padding-bottom: 224px;
}
.experience .experience-home .home-actions {
  position: fixed; z-index: 4; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--dock-bottom, 88px) + 8px); width: calc(100% - 32px); max-width: 480px;
  margin: 0; padding-top: 12px; background: var(--experience-ivory);
}
/* An editorial photo and message composition, only on an empty Home. */
.experience .experience-home.is-empty .chat-collage { display: block; margin: 22px auto 0; }
.experience .experience-home.is-empty .is-showcase .collage-conversation {
  position: relative; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;
  min-height: 260px; gap: 12px; padding: 30px 0 0; background: transparent; border: 0; box-shadow: none;
}
.experience .experience-home.is-empty .is-showcase .collage-contact {
  position: absolute; inset: 0; display: block; padding: 0; margin: 0; border: 0;
}
.experience .experience-home.is-empty .is-showcase .profile-art {
  display: block; position: absolute; top: 24px; left: 6px; width: 46%; height: calc(100% - 34px);
  border-radius: 24px; box-shadow: 0 14px 30px -14px #25233d26;
}
.experience .experience-home.is-empty .is-showcase .collage-contact strong {
  display: block; position: absolute; top: 0; left: 6px; font-size: 12px; font-weight: 650; color: var(--experience-copy);
}
.experience .experience-home.is-empty .is-showcase .collage-contact > div > span {
  position: absolute; top: 0; right: 2px; margin: 0; font-size: 12px;
}
.experience .experience-home.is-empty .is-showcase .collage-status { display: none; }
.experience .experience-home.is-empty .is-showcase .collage-incoming {
  position: relative; width: 62%; max-width: none;
  padding: 13px 15px; background: var(--experience-paper); line-height: 1.45;
  border: 1px solid var(--experience-border); box-shadow: 0 10px 24px -16px #25233d26;
}
.experience .experience-home.is-empty .is-showcase .collage-suggestion {
  position: relative; width: 82%; margin: 0; padding: 13px 16px 20px;
  border: 1px solid #d2c9fb; box-shadow: 0 12px 26px -14px #6554e82b;
}
.experience .experience-home.is-empty .is-showcase .suggestion-label { margin-bottom: 6px; }
.experience .experience-home.is-empty .is-showcase .collage-suggestion p { font-size: 14px; line-height: 1.4; }
@media (max-height: 760px) {
  .experience .experience-home.is-empty .chat-collage { margin-top: 14px; }
  .experience .experience-home.is-empty .is-showcase .collage-conversation { min-height: 224px; }
}
@media (max-height: 600px) and (orientation: portrait) {
  .experience .experience-home.is-empty h1 { font-size: 25px; }
  .experience .experience-home.is-empty .home-lead { display: none; }
  .experience .experience-home.is-empty .chat-collage { margin-top: 12px; }
  .experience .experience-home.is-empty .is-showcase .collage-conversation { min-height: 198px; }
  .experience .experience-home.is-empty .is-showcase .collage-incoming { padding: 9px 12px; font-size: 12px; }
  .experience .experience-home.is-empty .is-showcase .collage-suggestion { padding: 10px 12px 17px; }
  .experience .experience-home.is-empty .is-showcase .collage-suggestion p { font-size: 13px; }
  .experience .experience-home.is-empty .is-showcase .suggestion-label { margin-bottom: 4px; }
}
@media (max-height: 500px) and (min-width: 600px) and (orientation: landscape) {
  .experience .experience-home.is-empty { display: grid; grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr); gap: 20px; align-content: start; }
  .experience .experience-home.is-empty h1 { font-size: 26px; }
  .experience .experience-home.is-empty .chat-collage { margin: 0; width: 100%; }
  .experience .experience-home.is-empty .is-showcase .collage-conversation { min-height: 146px; padding-top: 24px; }
  .experience .experience-home.is-empty .is-showcase .profile-art { width: 28%; height: 120px; top: 20px; }
  .experience .experience-home.is-empty .is-showcase .collage-incoming { width: 66%; padding: 8px 12px; font-size: 12px; }
  .experience .experience-home.is-empty .is-showcase .collage-suggestion { width: 84%; padding: 8px 12px 10px; }
  .experience .experience-home.is-empty .is-showcase .suggestion-label { margin-bottom: 2px; }
  .experience .experience-home.is-empty .is-showcase .collage-suggestion p { font-size: 12px; }
}
.experience .home-history { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.experience .home-history-card { position: relative; min-width: 0; height: clamp(180px, 42vw, 245px); border-radius: 22px; background: var(--experience-paper); overflow: hidden; }
.experience .home-history-open { display: flex; flex-direction: column; gap: 8px; align-items: stretch; width: 100%; height: 100%; padding: 16px 16px 52px; background: transparent; border: 0; text-align: left; color: var(--experience-ink); cursor: pointer; }
.experience .home-history-open time { font-size: 15px; line-height: 1.3; font-weight: 750; }
/* The newest lines sit at the bottom of the card; a long tail is cut at its top, never at its newest words. */
.experience .home-history-text {
  display: flex; flex: 1 1 auto; flex-direction: column; justify-content: flex-end; min-height: 0;
  font-size: 16px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; overflow: hidden;
}
.experience .home-history-card.screenshot { background: var(--experience-ink); }
.experience .home-history-card.screenshot .home-history-open { padding: 0; }
.experience .home-history-open img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.experience .home-history-unavailable { display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; height: 100%; padding: 16px; color: var(--experience-paper); font-size: 14px; line-height: 1.4; text-align: center; }
.experience .home-history-delete { position: absolute; right: 4px; bottom: 4px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--experience-paper); color: var(--experience-ink); cursor: pointer; }
@media (max-height: 480px) and (min-width: 600px) {
  .experience .experience-home { padding-bottom: 150px; }
  .experience .experience-home .home-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); max-width: 680px; }
  .experience .home-history { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.experience .experience-bottom {
  position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; gap: 0;
  padding: 12px 8px max(12px, env(safe-area-inset-bottom)); background: var(--experience-paper);
  color: var(--experience-ink); z-index: 5; border-top: 1px solid var(--experience-border);
}
/*
 * Each label stays on one line (it never makes the bar taller): a tab is as wide as its label and shares the rest of
 * the row, so a long label (RU, UK at 300 px or 130 % zoom) takes what a short one leaves; an ellipsis only as a last
 * resort.
 */
.experience .experience-bottom button {
  flex: 1 1 auto; min-width: 0; max-width: 150px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: 0; color: var(--experience-muted); font-size: 12px; line-height: 16px; font-weight: 550;
  cursor: pointer; padding: 0 4px; text-align: center; white-space: nowrap;
}
.experience .experience-bottom .tab-icon { display: grid; place-items: center; flex-shrink: 0; font-size: 23px; line-height: 1.3; width: 35px; height: 31px; border-radius: 8px; }
.experience .experience-bottom .tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.experience .experience-bottom button.active { color: var(--experience-ink); font-weight: 750; }
.experience .experience-bottom button.active .tab-icon { background: var(--experience-soft); }
/* Above the tab bar; the transparent backdrop takes a tap outside, so nothing under it is pressed. */
.experience .experience-menu-backdrop {
  position: fixed; inset: 0; z-index: 6; border: 0; padding: 0; margin: 0; background: transparent; cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.experience .experience-menu {
  position: absolute; left: 16px; right: 16px; top: 74px; background: var(--experience-paper);
  color: var(--experience-ink); border: 1px solid var(--experience-border); border-radius: 20px; padding: 11px;
  box-shadow: 0 18px 45px #25233d26; z-index: 7; animation: experience-enter 0.18s both;
  max-height: calc(100svh - 90px); overflow-y: auto; overscroll-behavior: contain;
}
.experience .experience-menu a, .experience .experience-menu button {
  display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 10px 14px;
  border: 0; background: none; font-size: 14px; font-weight: 600; color: inherit; text-decoration: none;
  width: 100%; text-align: left; cursor: pointer; border-radius: 11px;
}
.experience .experience-menu a:hover, .experience .experience-menu button:hover { background: var(--experience-ivory); }
.experience .experience-menu span { color: #5442c9; }
.experience .experience-compose { padding: 8px 20px 28px; }
.experience .experience-compose[hidden] { display: none; }
.experience .compose-lead { font-size: 13px; line-height: 1.5; color: var(--experience-copy); max-width: 460px; margin: 4px 0 12px; }
/* Once the composer has input, it speaks for itself. */
.experience .experience-compose:has([data-analyze="screenshots"], textarea[data-context-input="conversation"]:not(:placeholder-shown)) .compose-lead { display: none; }
.experience .experience-tool section[data-tool-variant] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.experience .experience-tool section[data-tool-variant] > div:first-child { position: static; }
/* The card; its ActionDock spans it edge to edge (--card-pad is the card's padding). */
.experience .experience-tool section[data-tool-variant] > div:first-child > div {
  --card-pad: 18px;
  border: 1px solid var(--experience-border); background: var(--experience-paper); border-radius: 23px; padding: var(--card-pad);
}
.experience .experience-tool textarea, .experience .experience-tool input { background: var(--experience-paper); }
.experience .experience-tool [class*="shadow-ai-ring"] { box-shadow: 0 0 0 2px #6554e8; }
.experience .experience-tool [data-tool-panel] li { border-radius: 20px; }
.experience .experience-tool [class*="text-lime"] { color: #5442c9; }
.experience .experience-tool [class*="bg-blue"]:not([class~="peer-checked:bg-blue"]),
.experience .experience-tool .peer:checked ~ [class~="peer-checked:bg-blue"] { color: var(--experience-ink); background: var(--experience-soft); }
.experience .experience-tool .reply-copy-bubble { background: var(--experience-soft); color: var(--experience-ink); }
/* While a read is sent, a line scans the screenshots that are being read. */
.experience .experience-tool:has([data-tool="submit"][aria-busy="true"]) [data-analyze="screenshots"] li[data-shot]::after {
  content: ""; position: absolute; top: 6px; bottom: 6px; left: 0; width: 3px; border-radius: 2px; pointer-events: none;
  background: #6554e8; box-shadow: 0 0 10px 3px #6554e840; animation: scan-line 1.8s ease-in-out infinite alternate;
}
.experience .practice-popup { display: grid; gap: 19px; text-align: left; }
.experience .practice-pill { background: #e9e4ff; color: var(--experience-ink); border-radius: 14px; font-size: 21px; font-weight: 780; padding: 16px; }
.experience .practice-track { height: 5px; background: #ded9ed; border-radius: 20px; overflow: hidden; }
.experience .practice-track span { display: block; height: 100%; background: #6554e8; }
.experience .practice-note { font-size: 12px; line-height: 1.6; color: var(--experience-copy); }
.experience dialog:has(.practice-popup) {
  --color-ink: #25233d; --color-muted: #68627b; --color-line: #ded9ed; --color-line-strong: #817990;
  --color-raised: #f5f3ff; background: var(--experience-paper); color: var(--experience-ink); color-scheme: light;
}
.experience .experience-chat-analysis { padding: 15px 24px 30px; --card-pad: 24px; --dock-bg: var(--experience-ivory); }
.experience .chat-import { overflow-anchor: none; }
.experience .chat-import h1 { font-size: 32px; line-height: 1.15; font-weight: 780; letter-spacing: -0.045em; text-align: left; margin-bottom: 28px; }
.experience .import-privacy { color: var(--experience-copy); font-size: 12px; line-height: 1.6; text-align: left; margin: 18px auto; max-width: 430px; }
.experience .import-form { display: grid; gap: 17px; font-size: 14px; }
.experience .import-form textarea {
  width: 100%; background: var(--experience-paper); border: 1px solid #817990;
  color: var(--experience-ink); border-radius: 15px; padding: 15px; font-size: 16px; line-height: 1.5; resize: vertical; outline-offset: 3px;
}
.experience .import-form fieldset { border: 1px solid #817990; border-radius: 16px; padding: 15px; background: var(--experience-paper); }
.experience .import-form legend { padding: 0 5px; color: var(--experience-ink); }
.experience .participant-option { display: flex; gap: 12px; padding: 13px; align-items: center; overflow-wrap: break-word; min-height: 44px; }
.experience .import-consent { display: flex; gap: 12px; align-items: flex-start; font-size: 12px; line-height: 1.6; }
.experience .import-form input[type="checkbox"], .experience .import-form input[type="radio"] { accent-color: #5442c9; min-width: 20px; width: 20px; height: 20px; flex-shrink: 0; }
.experience .import-error { padding: 16px; border: 1px solid #a83250; border-radius: 15px; background: #fce7ed; color: #a83250; font-size: 13px; margin-top: 15px; }
/* Each step's action in reach: one status line, the action, and Cancel while a read runs. */
.experience .import-dock .import-error { padding: 0; margin: 0; border: 0; background: none; line-height: 1.45; }
.experience .import-dock .experience-button { width: 100%; }
.experience .import-dock[data-compact] .experience-button { min-height: 44px; padding-block: 8px; }
.experience .import-wait { color: var(--experience-copy); font-size: 13px; }
.experience .import-summary { display: grid; gap: 2px; }
.experience .import-read { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; font-size: 14px; }
.experience .import-read .import-count::after { content: "·"; margin-left: 8px; color: var(--experience-copy); }
.experience .import-replace {
  min-height: 44px; border: 0; background: none; padding: 0; font: inherit; font-weight: 650; cursor: pointer;
  color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px;
}
.experience .import-note { color: var(--experience-copy); font-size: 12px; line-height: 1.5; }
.experience .import-count { color: var(--experience-copy); font-size: 12px; }
.experience .import-read .import-count { font-size: 14px; color: var(--experience-ink); font-weight: 650; }
@keyframes experience-enter { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scan-line { to { left: calc(100% - 3px); } }
/* Wide windows: the results need the frame's whole content width. */
@media (min-width: 800px) {
  .experience .experience-tool section[data-tool-variant] { gap: 24px; }
  .experience .experience-tool section[data-tool-variant] > div { min-width: 0; }
}
/*
 * The framed layout: a tablet or a desktop window, wide AND tall. A landscape phone (800-932 px wide, 340-430 px
 * tall) keeps the phone layout below.
 */
@media (min-width: 800px) and (min-height: 600px) {
  /* clip, not hidden: no scroll container, so the ActionDock stays sticky from 800 to 959 px (iPad portrait). */
  .experience .experience-frame { min-height: calc(100svh - 40px); margin: 20px auto; border-radius: 28px; box-shadow: 0 18px 60px #25233d15; overflow: hidden; overflow: clip; background: inherit; padding-bottom: 86px; border: 1px solid var(--experience-border); }
  .experience.experience-dark .experience-frame { max-width: 560px; border-color: #50496c; box-shadow: 0 18px 65px #00000020; }
  .experience.experience-dark:has(.calibration-result) .experience-frame { border-color: #d2c9fb; }
  .experience .experience-bottom { left: 50%; right: auto; transform: translateX(-50%); width: min(100%, 760px); border-radius: 0 0 28px 28px; bottom: 20px; }
  .experience .calibration-welcome, .experience .calibration-quiz, .experience .calibration-result { min-height: calc(100svh - 126px); }
  /* Wide frames keep the illustration between the welcome and the actions, which close the screen. */
  .experience .experience-home { min-height: calc(100svh - 212px); padding-top: 24px; }
  .experience .experience-home .chat-collage { order: 1; margin: 27px auto 23px; }
  .experience .experience-home .profile-tag { order: 2; margin: 0 0 20px; }
  .experience .experience-home .home-actions { order: 3; margin-top: auto; }
  .experience .experience-compose { padding: 15px 32px 32px; }
  .experience .experience-chat-analysis { padding: 20px 40px 35px; --card-pad: 40px; }
  .experience .import-form textarea { min-height: 198px; }
}
/* Short tablet/desktop windows need the same compact entry hierarchy as phones. */
@media (min-width: 800px) and (min-height: 600px) and (max-height: 800px) {
  .experience .experience-home { padding-top: 6px; }
  .experience .experience-home h1 { font-size: 34px; }
  .experience .experience-home .home-lead { font-size: 13px; margin-top: 12px; }
  .experience .experience-home .chat-collage { margin: 16px auto 14px; }
  .experience .experience-home .collage-conversation { padding: 16px; }
  .experience .experience-home .collage-contact { border: 0; padding-bottom: 0; margin-bottom: 12px; }
  .experience .experience-home .collage-contact .profile-art,
  .experience .experience-home .collage-contact strong,
  .experience .experience-home .collage-status { display: none; }
  .experience .experience-home .collage-suggestion { padding-top: 11px; margin-top: 9px; }
  .experience .experience-home .collage-suggestion p { font-size: 13px; }
  .experience .experience-home .profile-tag { order: 4; margin: 14px 0 0; }
}
/* The phone layout (narrow, or short like a landscape phone): a 56 px header, the step first, decoration after it. */
@media (max-width: 799px), (max-height: 599px) {
  .experience .experience-header { height: 56px; padding: 6px 12px; gap: 8px; }
  .experience .experience-menu { top: 52px; left: 12px; right: 12px; }
  .experience .calibration-welcome, .experience .calibration-quiz, .experience .calibration-result { min-height: calc(100svh - 56px); }
  .experience .calibration-quiz { padding-top: 16px; }
  .experience .calibration-result { padding-top: 28px; }
  .experience .experience-home { padding: 14px 20px 24px; }
  .experience .experience-home .collage-conversation { padding: 16px; }
  .experience .experience-home .collage-contact { padding-bottom: 12px; margin-bottom: 12px; }
  .experience .experience-home .collage-suggestion { margin-top: 10px; padding: 12px 15px 18px; }
  .experience .experience-compose { padding: 4px 16px 24px; }
  /* A short Check hand-off still needs room to reveal its panel at the top.
     Reserve the scroll space outside the card so its actions stay together. */
  .experience .experience-compose:has([data-tool-panel]:not([hidden]) [data-tool-input="check"]) { min-height: 100svh; min-height: 100dvh; }
  .experience .chat-import h1 { font-size: 28px; margin-bottom: 16px; }
}
@media (max-width: 799px) and (max-height: 760px), (max-height: 599px) {
  .experience .experience-home .chat-collage { display: none; }
}
@media (max-width: 359px) {
  .experience .experience-header { padding: 6px 8px; }
  .experience .experience-wordmark { font-size: 25px; }
  .experience .calibration-quiz { padding: 14px 18px 22px; }
  .experience .calibration-choice { padding: 15px 12px; font-size: 14px; border-radius: 17px; }
  .experience .calibration-choices { gap: 10px; }
  .experience .quiz-question { min-height: 136px; }
  .experience .quiz-question h1 { font-size: 26px; }
  .experience .experience-home { padding: 12px 16px 19px; }
  .experience .experience-home h1 { font-size: 27px; }
  .experience .home-lead { font-size: 13px; margin-top: 10px; }
  .experience .experience-home .chat-collage { margin: 20px auto 0; }
  .experience .collage-conversation { padding: 16px; border-radius: 22px; }
  .experience .collage-contact { padding-bottom: 13px; margin-bottom: 13px; }
  .experience .collage-incoming { font-size: 12px; padding: 11px 12px; }
  .experience .collage-suggestion { margin-left: 15px; padding: 12px 13px 19px; }
  .experience .collage-suggestion p { font-size: 13px; }
  .experience .experience-chat-analysis { padding: 10px 18px 24px; --card-pad: 18px; }
  .experience .chat-import h1 { font-size: 26px; }
  .experience .experience-compose { padding: 4px 12px 24px; }
  .experience .experience-tool section[data-tool-variant] > div:first-child > div { --card-pad: 14px; }
  .experience .home-secondary .experience-button { font-size: 13px; padding: 10px 8px; }
  .experience .calibration-result { padding: 24px 19px 24px; }
}
@media (max-height: 720px) and (max-width: 799px), (max-height: 599px) {
  .experience .calibration-art { margin-top: 5px; margin-bottom: 23px; }
  .experience .calibration-mini-phone { padding: 16px; }
  .experience .mini-progress { margin: 12px 0 14px; }
  .experience .mini-options { margin-top: 15px; }
  .experience .mini-options span { min-height: 75px; font-size: 10px; padding: 9px; }
  .experience .welcome-copy h1 { font-size: 31px; }
  .experience .welcome-copy p { font-size: 14px; }
  .experience .calibration-welcome { padding-bottom: 17px; }
  .experience .calibration-quiz { padding-top: 12px; }
  .experience .quiz-question { min-height: 126px; }
  .experience .quiz-question h1 { font-size: 26px; }
  .experience .calibration-choice { min-height: 170px; }
  .experience .quiz-heart { padding-top: 17px; }
  .experience .quiz-heart span { font-size: 24px; }
  .experience .calibration-actions { padding-top: 17px; gap: 9px; }
  .experience .calibration-result { padding-top: 25px; }
  .experience .calibration-result h1 { margin-bottom: 24px; font-size: 30px; }
  .experience .experience-home { padding-top: 10px; }
}
/* The composer's lead gives way on short screens: its input and action come first. */
@media (max-height: 700px) {
  .experience .compose-lead { display: none; }
}
@media (max-height: 600px) {
  .experience .quiz-question { min-height: auto; }
  .experience .quiz-heart p { display: none; }
  .experience .calibration-result h1 { font-size: 26px; margin-bottom: 16px; }
  .experience .calibration-result li { padding: 12px; }
  .experience .calibration-art { display: none; }
}
/* A landscape phone: both answers and "None" on the first screen. */
@media (max-height: 520px) {
  .experience .calibration-quiz { padding-top: 8px; padding-bottom: 12px; }
  .experience .quiz-question h1 { font-size: 26px; }
  .experience .quiz-heart { display: none; }
  .experience .calibration-choice { min-height: auto; gap: 12px; padding: 14px 16px; font-size: 16px; }
  .experience .calibration-actions { padding-top: 12px; }
}
/*
 * A landscape phone: the tab bar is one 48 px row (each icon left of its label), and Home's three entries share one
 * row under its title, so both entries are on the first screen. (A short upright window, a phone at 130 % zoom,
 * keeps the column tabs: its labels need the width.)
 */
@media (max-height: 500px) and (orientation: landscape) {
  .experience .experience-frame { padding-bottom: 60px; }
  .experience .experience-bottom { height: calc(48px + env(safe-area-inset-bottom)); align-items: center; padding: 0 8px env(safe-area-inset-bottom); }
  .experience .experience-bottom button { flex-direction: row; justify-content: center; gap: 6px; min-height: 44px; }
  .experience .experience-bottom .tab-icon { width: 30px; height: 28px; font-size: 20px; }
  .experience .experience-home { max-width: 680px; }
  .experience .experience-home .home-lead, .experience .experience-home .home-actions > p { display: none; }
  .experience .experience-home .home-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: stretch; margin-top: 16px; }
  .experience .experience-home .home-secondary .experience-button { font-size: 13px; }
}
/* Narrow phones: the two answers stack, full width, so no word breaks. */
@media (max-width: 479px) {
  .experience .calibration-choices { flex-direction: column; flex-wrap: nowrap; gap: 10px; }
  .experience .calibration-choice {
    flex: none; min-height: auto; flex-direction: row; align-items: flex-start; justify-content: flex-start;
    gap: 14px; padding: 16px;
  }
  .experience .calibration-choice .choice-number { flex-shrink: 0; min-width: 1.4em; font-size: 15px; line-height: 1.45; }
}
@media (prefers-reduced-motion: reduce) {
  .experience * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* The first task is a conversation; optional teaching and practice follow the user's choice. */
.experience:has(.quick-welcome) .experience-frame { padding-bottom: 28px; }
.experience .quick-welcome { min-height: auto; padding-top: 16px; }
.experience .quick-welcome .welcome-copy p { color: var(--experience-copy); }
.experience .quick-welcome .calibration-actions { margin-top: 0; padding-top: 0; }
.experience .quick-welcome .chat-collage { margin: 28px auto 0; max-width: 380px; }
/* The practice invitation: one quiet row after the result, never a card that repeats Continue. */
.experience .practice-invitation {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 4px;
  margin-top: 12px; padding: 4px 0; border-top: 1px solid var(--experience-border);
}
.experience .practice-invitation .quiet-button { min-height: 44px; padding: 10px; font-size: 13px; color: var(--experience-copy); }
.experience .import-start { display: grid; gap: 12px; }
.experience .import-start > p:first-child { color: var(--experience-copy); font-size: 16px; line-height: 1.6; }
.experience .import-start .import-privacy { margin: 2px 0; max-width: none; }
.experience .import-form > p:first-child { color: var(--experience-copy); line-height: 1.6; }
.experience .import-help { border-top: 1px solid var(--experience-border); margin-top: 10px; padding-top: 12px; }
.experience .import-help summary { cursor: pointer; padding: 10px 0; min-height: 44px; font-weight: 650; overflow-wrap: break-word; }
.experience .import-help summary:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }
/* Whole chat stage (2026-10-08): the export guide's rules are the stage's own stylesheet, chat.<sha12>.css
   (src/features/experience/deferred-stage.ts). The guide shows once that file has loaded, never unstyled; the
   heading's short-screen sizes stay here, because the heading shows before it. */
.experience .export-guide { display: none; }
@media (max-height: 700px) and (max-width: 799px) { .experience .chat-import h1 { font-size: 24px; margin-bottom: 16px; } }
@media (max-height: 600px) and (max-width: 799px) { .experience .chat-import h1 { font-size: 22px; margin-bottom: 8px; } }
@media (max-height: 700px) {
  .experience .quick-welcome .welcome-copy h1 { font-size: 32px; }
  .experience .quick-welcome .chat-collage { margin-top: 18px; }
}
/* Decoration after the actions, and none on short phones. */
@media (max-height: 760px) {
  .experience .quick-welcome .chat-collage { display: none; }
}

/* App identity and surfaces. Public examples continue to use the shared stylesheet. */
.experience.experience-pastel, .experience.experience-import {
  background: radial-gradient(ellipse at 90% 0%, #ffe9e5 0, transparent 35%), var(--experience-ivory);
}
.experience .experience-button { border-radius: 17px; font-weight: 750; }
.experience .experience-button:is(.black, .purple, .gradient) {
  background: var(--color-lime); color: var(--color-on-lime); box-shadow: var(--shadow-lime);
}
.experience .experience-button:is(.black, .purple, .gradient):hover:not(:disabled) { box-shadow: var(--shadow-lime-hover); }
.experience .experience-button.white { background: var(--experience-paper); border-color: var(--color-line-strong); }
.experience .experience-button.glass { background: #3d365d; border-color: #a49aba; color: #ffffff; }
.experience .experience-button > svg { flex-shrink: 0; }
.experience .experience-header { border-bottom: 1px solid #ded9ed80; }
.experience .experience-icon { border: 1px solid var(--experience-border); background: var(--experience-paper); border-radius: 15px; }
.experience .experience-icon:hover { background: var(--experience-soft); }
.experience:not(.experience-dark) .experience-header > .experience-icon:last-child { color: var(--color-accent); background: var(--experience-soft); border-color: transparent; }
.experience .experience-wordmark { display: inline-flex; align-items: center; gap: 9px; font-size: 26px; letter-spacing: -0.065em; }
.experience .experience-wordmark::after { display: none; }
.experience .experience-brand-mark { flex-shrink: 0; overflow: visible; }
.experience .brand-mark-tile { fill: var(--color-lime); }
.experience .brand-mark-spark { fill: var(--experience-coral); stroke: var(--experience-paper); stroke-width: 2; }
.experience .home-title-line:last-child { color: var(--color-accent); }
.experience .home-lead { max-width: 370px; line-height: 1.6; }
.experience .experience-home { padding-top: 24px; }
.experience .experience-home .home-actions {
  padding: 12px 0 0; background: linear-gradient(0deg, var(--experience-ivory) 88%, #f5f3ff00);
}
.experience .home-actions > .experience-button { justify-content: flex-start; padding-inline: 20px; min-height: 56px; }
.experience .home-actions > .experience-button > span { flex: 1; text-align: left; }
.experience .home-actions .home-action-arrow { margin-left: auto; }
.experience .home-secondary .experience-button { gap: 8px; font-size: 13px; min-height: 56px; padding: 11px 9px; }
.experience .home-secondary .experience-button:first-child { background: var(--experience-paper); }
.experience .home-secondary .experience-button:last-child { background: #fff4f0; border-color: #a56966; }
.experience .home-secondary .experience-button svg { color: var(--color-accent); }
.experience .home-secondary .experience-button:last-child svg { color: #a04447; }
.experience .chat-collage:not(.is-showcase)::before {
  content: ""; position: absolute; inset: -7px 9px 8px -7px; border-radius: 27px;
  background: var(--experience-peach); border: 1px solid #f6cfc7; transform: rotate(-3deg); z-index: -1;
}
.experience .collage-conversation { position: relative; border-color: var(--experience-border); box-shadow: 0 14px 36px -20px #5442c955; }
.experience .collage-contact { border-bottom-color: var(--experience-border); }
.experience .profile-art { box-shadow: 0 0 0 3px var(--experience-peach); }
.experience .collage-status { background: var(--color-success); box-shadow: 0 0 0 4px var(--color-good-fill); }
.experience .collage-incoming { background: var(--color-her); }
.experience .collage-suggestion { background: var(--experience-soft); border: 1px solid #d7cff8; }
.experience .suggestion-label { color: var(--color-tone-ink); letter-spacing: 0; }
.experience .suggestion-label svg { color: var(--color-lime); }
.experience .suggestion-check { color: var(--color-accent); }
.experience .collage-report i:nth-child(n + 3) { background: var(--experience-border); }
.experience .home-history { gap: 14px; }
.experience .home-history-card { border: 1px solid var(--experience-border); box-shadow: 0 5px 18px #25233d06; transition: transform 0.18s, box-shadow 0.18s; }
.experience .home-history-card:nth-child(3n + 2):not(.screenshot) { background: #fff4f0; border-color: #f0d9d5; }
.experience .home-history-card:nth-child(3n + 3):not(.screenshot) { background: #eef9f4; border-color: #d2e9df; }
.experience .home-history-card:has(.home-history-open:hover) { transform: translateY(-2px); box-shadow: 0 8px 24px #25233d10; }
.experience .home-history-open time { color: var(--color-accent); font-size: 13px; }
.experience .home-history-delete { width: 44px; height: 44px; right: 6px; bottom: 6px; background: #ffffffeb; }
.experience .home-history-delete:hover { color: var(--color-danger); background: var(--color-bad-fill); }
.experience .home-history-unavailable { background: linear-gradient(145deg, #3d365d, #25233d); color: #e9e4ff; }
.experience .experience-bottom { box-shadow: 0 -6px 24px #25233d04; }
.experience .experience-bottom button { min-height: 48px; }
.experience .experience-bottom button.active { color: var(--color-accent); }
.experience .experience-bottom .tab-icon { width: 54px; border-radius: 11px; }
.experience .experience-bottom button.active .tab-icon { background: var(--experience-soft); }
.experience .experience-menu { padding: 9px; box-shadow: 0 18px 48px #25233d24; }
.experience .experience-menu a, .experience .experience-menu button { min-height: 52px; border-radius: 13px; }
.experience .experience-menu button:first-child { background: var(--experience-soft); color: var(--color-tone-ink); }
.experience .experience-menu span { font-size: 20px; color: var(--color-accent); }
.experience .experience-menu-backdrop { background: #25233d12; backdrop-filter: blur(2px); }
.experience .experience-tool section[data-tool-variant] > div:first-child > div { box-shadow: 0 8px 30px #25233d06; }
.experience .experience-tool textarea { border-radius: 17px; background: #fcfbff; }
.experience .experience-tool textarea:focus { background: var(--experience-paper); }
.experience .experience-tool [data-tool-panel] li { border-color: var(--experience-border); }
.experience .reply-copy-bubble { border-radius: 18px 18px 5px 18px; }
.experience .reply-copy-bubble.is-pick { box-shadow: 0 0 0 2px var(--color-accent), 0 6px 20px #6554e815; }
.experience .reply-copy-bubble[data-state="copied"], .experience .experience-tool .reply-copy-bubble[data-state="copied"] {
  background: var(--color-good-fill); color: var(--color-good-ink);
}
.experience .import-start > .experience-button:first-of-type { box-shadow: var(--shadow-lime); }
.experience .import-help { border-radius: 18px; border: 1px solid var(--experience-border); padding: 8px 16px; background: #ffffff80; }

/* Sheets keep the app palette in the browser's top layer. */
html:has(:is(.experience, .experience-account, .experience-simple-lines)) dialog { background: var(--experience-paper); color: var(--experience-ink); color-scheme: light; }
html:has(:is(.experience, .experience-account, .experience-simple-lines)) dialog::backdrop { background: #25233d66; backdrop-filter: blur(5px); }
html:has(:is(.experience, .experience-account, .experience-simple-lines)) dialog:has(.rizz-paywall-title) > div > div:first-child {
  --color-ink: #ffffff; --color-raised: #453b64; --color-line-strong: #a49aba;
  background: #302c4e; color: #ffffff;
}
html:has(:is(.experience, .experience-account, .experience-simple-lines)) dialog:has(.rizz-paywall-title) fieldset label:has(input:checked) { background: var(--experience-soft); border-color: var(--color-accent); }
html:has(:is(.experience, .experience-account, .experience-simple-lines)) .rizz-pro-hero { background: #302c4e; border-color: #50496c; }
html:has(:is(.experience, .experience-account, .experience-simple-lines)) .pro-preview-top { color: #d5ceff; }
html:has(:is(.experience, .experience-account, .experience-simple-lines)) .pro-preview-chat i { background: #796c9c; }
html:has(:is(.experience, .experience-account, .experience-simple-lines)) .pro-preview-chat i + i { background: #5e547d; }
html:has(:is(.experience, .experience-account, .experience-simple-lines)) .pro-preview-reply svg { color: var(--color-accent); }
.experience.experience-dark { background: radial-gradient(ellipse at 85% 0%, #443163, transparent 55%), #25233d; }
.experience.experience-dark .experience-header { border-color: #50496c; }
.experience.experience-dark .experience-icon { background: #3d365d; border-color: #817990; color: #ffffff; }
.experience.experience-dark .calibration-actions .experience-button.white { background: #6554e8; border-color: #6554e8; color: #ffffff; box-shadow: 0 6px 24px #17132940; }
.experience.experience-dark:has(.calibration-result) .experience-header { border-color: #edc2bd; }
.experience.experience-dark:has(.calibration-result) .experience-icon { background: #ffffff80; border-color: #edc2bd; color: #25233d; }
.experience.experience-dark:has(.calibration-result) .experience-frame { background: var(--experience-peach); }
.experience.experience-dark .calibration-result > .experience-button.white { background: #6554e8; color: #ffffff; border-color: #6554e8; }
.experience.experience-dark .calibration-result li { border-color: #f0d9d5; background: #ffffffb3; }
.experience.experience-dark .style-reveal { color: #5442c9; }

/* Desktop is a conversation workspace, with a separate preview beside the entry actions. */
@media (min-width: 1000px) and (min-height: 600px) {
  .experience .experience-frame { width: calc(100% - 64px); max-width: 1120px; margin: 24px auto; min-height: calc(100svh - 48px); border-radius: 32px; box-shadow: 0 20px 64px #4f3cb514; }
  .experience .experience-header { height: 88px; padding: 20px 32px; }
  .experience .experience-menu { left: 30px; right: auto; width: 320px; top: 78px; }
  .experience .experience-home { max-width: 100%; padding: 42px 48px 148px; }
  .experience .experience-home.is-empty {
    display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    grid-template-areas: "title preview" "lead preview" "actions preview";
    column-gap: 66px; row-gap: 0; align-content: center; min-height: calc(100svh - 224px); padding-bottom: 44px;
  }
  .experience .experience-home.is-empty h1 { grid-area: title; font-size: clamp(38px, 3.7vw, 52px); max-width: 470px; }
  .experience .experience-home.is-empty .home-lead { grid-area: lead; font-size: 15px; margin: 20px 0 28px; }
  .experience .experience-home.is-empty .chat-collage { grid-area: preview; width: 100%; max-width: 440px; margin: 0; align-self: center; }
  .experience .experience-home.is-empty .collage-conversation { padding: 25px; border-radius: 27px; }
  .experience .experience-home.is-empty .collage-contact { padding-bottom: 18px; margin-bottom: 19px; border-bottom: 1px solid var(--experience-border); }
  .experience .experience-home.is-empty .chat-collage:not(.is-showcase) .collage-contact :is(.profile-art, strong, .collage-status) { display: block; }
  .experience .experience-home.is-empty .collage-incoming { padding: 15px 17px; font-size: 14px; line-height: 1.55; }
  .experience .experience-home.is-empty .collage-suggestion { margin: 16px 0 0 22px; padding: 18px 18px 23px; }
  .experience .experience-home.is-empty .collage-suggestion p { font-size: 15px; line-height: 1.55; }
  .experience .experience-home.is-empty .home-actions { grid-area: actions; position: static; width: 100%; max-width: 420px; transform: none; padding: 0; background: none; }
  .experience .experience-home:not(.is-empty) .home-actions { max-width: 720px; grid-template-columns: 1fr 1.25fr; gap: 14px; }
  .experience .home-history { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .experience .home-history-card { height: 220px; }
  .experience .experience-bottom { width: 392px; bottom: 42px; padding: 9px 10px; border: 1px solid var(--experience-border); border-radius: 23px; box-shadow: 0 8px 24px #25233d0a; }
  .experience .experience-bottom button { flex-direction: row; gap: 9px; max-width: none; padding: 6px 10px; border-radius: 15px; font-size: 13px; }
  .experience .experience-bottom button.active { background: var(--experience-soft); }
  .experience .experience-bottom .tab-icon { width: 26px; height: 28px; }
  .experience .experience-compose { max-width: 920px; margin: auto; padding: 28px 32px 40px; }
  .experience .experience-chat-analysis { max-width: 860px; margin: auto; padding: 34px 40px; }
  .experience.experience-dark .experience-frame { max-width: 600px; }
  .experience.experience-dark .experience-header { height: 84px; }
}
@media (max-width: 799px), (max-height: 599px) {
  .experience .experience-header { border-bottom-color: transparent; }
  .experience .experience-wordmark { font-size: 24px; gap: 7px; }
  .experience .experience-brand-mark { width: 31px; height: 31px; }
  .experience .experience-icon { width: 44px; min-width: 44px; height: 44px; border-radius: 14px; }
  .experience .experience-home { padding-top: 21px; }
}
@media (max-height: 760px) {
  .experience .experience-home.is-empty { padding-top: 12px; }
}
@media (max-width: 359px) {
  .experience .home-secondary .experience-button { font-size: 12px; gap: 6px; }
  .experience .home-secondary .experience-button svg { width: 17px; }
  .experience .chat-collage:not(.is-showcase)::before { display: none; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .experience .experience-home { padding-top: 10px; }
  .experience .home-actions > .experience-button, .experience .home-secondary .experience-button { min-height: 48px; }
  .experience .experience-bottom button { min-height: 44px; }
  .experience .chat-collage:not(.is-showcase)::before { display: none; }
}

/* Only the app entry modes of these shared routes load and activate this treatment. */
.experience-simple-lines .experience-brand-mark { flex-shrink: 0; }
.experience-simple-lines .brand-mark-tile { fill: #6554e8; }
.experience-simple-lines .brand-mark-spark { fill: #ff867c; stroke: #ffffff; stroke-width: 2; }
html:has(.experience-account) body { background: #f5f3ff; }
html:has(.experience-account) main > div {
  width: calc(100% - 32px); max-width: 800px; margin: 28px auto;
  padding: 28px; background: #ffffff; border: 1px solid #ded9ed; border-radius: 28px;
}
@media (max-width: 600px) {
  html:has(.experience-account) main > div { margin: 16px auto; padding: 22px 18px; border-radius: 23px; }
  .experience-simple-lines .experience-brand-mark { width: 31px; height: 31px; }
}

/* BEGIN ARCADE SOURCES */
/* App-only arcade surfaces. Assembled into the content-hashed app stylesheet. */
.experience.experience-arcade {
  --arcade-violet: var(--color-brand);
  --arcade-lime: var(--color-spark);
  --arcade-coral: #ff8e86;
  --arcade-ink: #241b35;
  --arcade-paper: #fff;
  --experience-ink: var(--arcade-ink);
  --experience-ivory: #f5f1ff;
  --experience-border: #ded5ef;
  --experience-copy: #6b617d;
  --experience-soft: #eee6ff;
  --color-ink: var(--arcade-ink);
  --color-muted: #6b617d;
  --color-accent: #6334dd;
  --color-lime: var(--arcade-violet);
  --color-on-lime: #fff;
  --color-blue: #eee6ff;
  --color-on-blue: var(--arcade-ink);
  --color-raised: #f5f1ff;
  --shadow-lime: 0 4px 0 #452598, 0 9px 20px #6b3ff524;
  --shadow-lime-hover: 0 5px 0 #452598, 0 12px 24px #6b3ff52e;
  background: radial-gradient(ellipse at 95% 6%, #ffdfd97a, transparent 32%), radial-gradient(ellipse at 0% 44%, #ddd1ff8c, transparent 40%), #f5f1ff;
}
.experience.experience-arcade .experience-frame { isolation: isolate; }
.experience.experience-arcade .experience-header { height: 70px; padding: 12px 19px; border: 0; }
.experience.experience-arcade .experience-icon {
  border: 1px solid #d7cbe8; border-radius: 15px; background: #ffffffd9;
  box-shadow: 0 3px 0 #ded5ef; transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
}
.experience.experience-arcade .experience-icon:active { transform: translateY(2px) scale(.96); box-shadow: 0 1px 0 #ded5ef; }
.experience.experience-arcade .experience-header > .experience-icon:last-child {
  background: var(--arcade-lime); border-color: #b8d954; color: var(--arcade-ink); box-shadow: 0 3px 0 #bfd76e;
}
.experience.experience-arcade .experience-wordmark { font-size: 28px; font-weight: 850; letter-spacing: -.075em; gap: 8px; }
.experience.experience-arcade .experience-brand-mark { transform: rotate(-7deg); }
.experience.experience-arcade .experience-header-title { font-size: 16px; letter-spacing: -.025em; }
.experience.experience-arcade .experience-home { padding: 15px 22px 240px; }
.experience.experience-arcade .experience-home h1 {
  font-size: clamp(30px, 8.5vw, 46px); font-weight: 850; letter-spacing: -.06em; line-height: 1.05;
}
.experience.experience-arcade .home-title-line { position: relative; z-index: 0; }
.experience.experience-arcade .home-title-line:last-child { color: var(--arcade-violet); }
.experience.experience-arcade .home-title-line:last-child::after {
  content: ""; position: absolute; left: 1px; right: -3px; bottom: 1px; height: .2em;
  background: var(--arcade-lime); transform: rotate(-1.5deg); z-index: -1; border-radius: 2px;
}
.experience.experience-arcade .home-lead { max-width: 335px; font-size: 13px; line-height: 1.5; margin-top: 12px; }
.experience.experience-arcade .experience-home .home-history-heading { font-size: 29px; margin: 3px 0 22px; }

/* An illustrated conversation, with its real example label always visible. */
.experience.experience-arcade .experience-home.is-empty .chat-collage { margin: 21px auto 0; max-width: 410px; }
.experience.experience-arcade .arcade-scene { position: absolute; inset: 16px -3px 0; z-index: -1; pointer-events: none; }
.experience.experience-arcade .arcade-scene-orbit {
  position: absolute; inset: 17% 10% 7%; border: 1px solid #b3a0e7; border-radius: 50%;
  transform: rotate(-24deg); background: radial-gradient(ellipse, #e9dfff 32%, #e9dfff00 70%);
}
.experience.experience-arcade .arcade-scene-spark { position: absolute; color: var(--arcade-violet); }
.experience.experience-arcade .spark-one { left: 2%; bottom: 4%; transform: rotate(10deg); }
.experience.experience-arcade .spark-two { right: 1%; top: 7%; color: #e17868; transform: rotate(-10deg); }
.experience.experience-arcade .arcade-scene-cross { position: absolute; right: 6%; bottom: 43%; width: 17px; height: 17px; transform: rotate(15deg); }
.experience.experience-arcade .arcade-scene-cross::before,
.experience.experience-arcade .arcade-scene-cross::after { content: ""; position: absolute; background: #8b6ad0; border-radius: 3px; }
.experience.experience-arcade .arcade-scene-cross::before { width: 100%; height: 3px; top: 7px; }
.experience.experience-arcade .arcade-scene-cross::after { width: 3px; height: 100%; left: 7px; }
.experience.experience-arcade .experience-home.is-empty .is-showcase .collage-conversation {
  min-height: 252px; padding: 39px 3px 7px; gap: 14px;
}
.experience.experience-arcade .experience-home.is-empty .is-showcase .profile-art {
  top: 28px; left: 9px; width: 43%; height: calc(100% - 39px); border: 4px solid #fff;
  border-radius: 25px; transform: rotate(-7deg); box-shadow: 0 5px 0 #d0bde6, 0 15px 28px #38234f21;
  animation: arcade-photo-in .65s cubic-bezier(.2,.75,.2,1) both;
}
.experience.experience-arcade .experience-home.is-empty .is-showcase .collage-contact strong { display: none; }
.experience.experience-arcade .experience-home.is-empty .is-showcase .collage-contact > div > span {
  right: 5px; top: 0; color: var(--experience-copy); font-size: 12px; font-weight: 600; letter-spacing: .015em;
}
.experience.experience-arcade .experience-home.is-empty .is-showcase .collage-incoming {
  width: 64%; padding: 13px 14px; background: #fff; border: 1px solid #cfc0e5;
  border-radius: 19px 19px 19px 5px; box-shadow: 0 4px 0 #dcd0ee; transform: rotate(3deg);
  font-size: 13px; line-height: 1.45; animation: arcade-message-in .55s .1s cubic-bezier(.2,.8,.2,1) both;
}
.experience.experience-arcade .experience-home.is-empty .is-showcase .collage-suggestion {
  width: 83%; margin: 0; padding: 13px 16px 20px; border: 1px solid #5930c6;
  background: var(--arcade-violet); color: #fff; border-radius: 20px 20px 6px 20px;
  box-shadow: 0 5px 0 #452598, 0 15px 24px #6b3ff52e; transform: rotate(-2deg);
  animation: arcade-reply-in .6s .2s cubic-bezier(.2,.8,.2,1) both;
}
.experience.experience-arcade .experience-home.is-empty .is-showcase .suggestion-label { color: var(--arcade-lime); font-size: 12px; margin-bottom: 6px; }
.experience.experience-arcade .experience-home.is-empty .is-showcase .suggestion-label svg,
.experience.experience-arcade .experience-home.is-empty .is-showcase .suggestion-check { color: var(--arcade-lime); }
.experience.experience-arcade .experience-home.is-empty .is-showcase .collage-suggestion p { font-size: 14px; font-weight: 650; line-height: 1.4; }

/* A tactile action tray and compact, thumb-sized navigation. */
.experience.experience-arcade .experience-home .home-actions {
  bottom: calc(var(--dock-bottom, 76px) + 8px); width: calc(100% - 32px); max-width: 478px;
  gap: 10px; padding: 18px 0 0; background: linear-gradient(0deg, #f5f1ff 88%, #f5f1ff00);
}
.experience.experience-arcade .home-actions > .experience-button {
  min-height: 62px; padding: 9px 12px; border-radius: 19px; gap: 12px; font-size: 15px;
  border: 1px solid #5830c6; box-shadow: var(--shadow-lime); transition: transform .16s, box-shadow .16s;
}
.experience.experience-arcade .home-actions > .experience-button > .home-action-icon {
  display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center;
  border-radius: 12px; background: var(--arcade-lime); color: var(--arcade-ink); transform: rotate(-5deg);
}
.experience.experience-arcade .home-actions > .experience-button > .home-action-label { flex: 1; }
.experience.experience-arcade .home-actions .home-action-arrow { width: 28px; height: 28px; padding: 4px; border-radius: 50%; background: #ffffff25; }
.experience.experience-arcade .home-secondary { gap: 9px; }
.experience.experience-arcade .home-secondary .experience-button {
  min-height: 54px; padding: 8px 10px; border-radius: 16px; border: 1px solid #c7b8dc;
  background: #fff; color: var(--arcade-ink); box-shadow: 0 3px 0 #ded2ed; font-size: 12px; line-height: 1.3; gap: 8px;
}
.experience.experience-arcade .home-secondary .experience-button:last-child { background: #fff0df; border-color: #ddb994; box-shadow: 0 3px 0 #efd6bc; }
.experience.experience-arcade .home-secondary .home-action-icon { display: grid; place-items: center; flex: 0 0 25px; color: var(--arcade-violet); }
.experience.experience-arcade .home-secondary .experience-button:last-child .home-action-icon { color: #a74e38; }
.experience.experience-arcade .home-actions .experience-button:active { transform: translateY(3px) scale(.99); box-shadow: 0 0 0 transparent; }
.experience.experience-arcade .experience-bottom {
  left: 50%; right: auto; transform: translateX(-50%); bottom: max(10px, env(safe-area-inset-bottom));
  width: calc(100% - 32px); max-width: 478px; padding: 6px; gap: 6px; border: 1px solid #342547;
  border-radius: 22px; background: var(--arcade-ink); color: #fff; box-shadow: 0 5px 0 #d5c7e9, 0 12px 30px #241b351a;
}
.experience.experience-arcade .experience-bottom button {
  min-height: 45px; max-width: none; flex: 1 1 0; flex-direction: row; justify-content: center;
  padding: 6px; gap: 8px; font-size: 12px; color: #d1c6e4; border-radius: 15px; font-weight: 600;
  transition: background .18s, transform .18s;
}
.experience.experience-arcade .experience-bottom button.active { background: var(--arcade-lime); color: var(--arcade-ink); font-weight: 750; }
.experience.experience-arcade .experience-bottom button:active { transform: scale(.96); }
.experience.experience-arcade .experience-bottom button .tab-icon,
.experience.experience-arcade .experience-bottom button.active .tab-icon { background: transparent; width: 25px; height: 25px; }
.experience.experience-arcade .experience-bottom button:focus-visible { outline-color: #fff; outline-offset: 1px; }

/* Recent conversations look like saved cards, without inventing game progress. */
.experience.experience-arcade .home-history { gap: 15px; }
.experience.experience-arcade .home-history-card { border: 1px solid #d3c2e7; border-radius: 23px; box-shadow: 0 5px 0 #dfd2ef; }
.experience.experience-arcade .home-history-card:nth-child(3n + 2):not(.screenshot) { background: #fff0e9; border-color: #e6beab; box-shadow: 0 5px 0 #efd8cc; }
.experience.experience-arcade .home-history-card:nth-child(3n + 3):not(.screenshot) { background: #f1ffd3; border-color: #c6d99d; box-shadow: 0 5px 0 #dbe8c0; }
.experience.experience-arcade .home-history-open { padding: 15px 14px 55px; gap: 13px; }
.experience.experience-arcade .home-history-meta { display: flex; align-items: center; gap: 7px; color: var(--arcade-violet); }
.experience.experience-arcade .home-history-meta time { font-size: 12px; color: var(--arcade-ink); }
.experience.experience-arcade .home-history-text { font-size: 15px; line-height: 1.4; letter-spacing: -.015em; }
.experience.experience-arcade .home-history-enter {
  position: absolute; left: 13px; bottom: 12px; display: grid; width: 32px; height: 32px; place-items: center;
  border-radius: 10px; background: var(--arcade-violet); color: #fff; transition: transform .2s;
}
.experience.experience-arcade .home-history-open:hover .home-history-enter { transform: translateX(3px); }
.experience.experience-arcade .home-history-photo-date {
  position: absolute; top: 11px; left: 11px; padding: 5px 8px; border-radius: 9px;
  background: #ffffffeb; color: var(--arcade-ink); font-size: 12px; box-shadow: 0 2px 8px #241b351a;
}
.experience.experience-arcade .home-history-delete { right: 6px; bottom: 6px; width: 44px; height: 44px; background: #ffffffed; }

/* The input is a control board. Values, consent and request ownership remain native form controls. */
.experience.experience-arcade .experience-compose { padding: 7px 16px 28px; }
.experience.experience-arcade .experience-tool section[data-tool-variant] > div:first-child > div {
  --card-pad: 16px; border-color: #d6c8e8; border-radius: 25px; box-shadow: 0 5px 0 #e5dcf2, 0 12px 28px #41245f06;
}
.experience.experience-arcade [data-composer-editor] { gap: 11px; }
.experience.experience-arcade [data-analyze="drop-zone"] {
  min-height: 62px; background: #f5f0ff; border-color: #b09aca; border-radius: 17px; border-width: 1px;
}
.experience.experience-arcade [data-analyze="drop-zone"] > span:first-child { background: #e9ddff; border-radius: 11px; width: 37px; height: 37px; }
.experience.experience-arcade [data-analyze="drop-zone"]:hover:not(:disabled) { background: #eee5ff; border-color: var(--arcade-violet); }
.experience.experience-arcade [data-context-input="conversation"] {
  min-height: 122px; border-color: #c6b8d9; border-radius: 17px; background: #fffdfd;
  box-shadow: inset 0 2px 7px #37204b06; font-size: 16px; line-height: 1.5;
}
.experience.experience-arcade .reply-style-control { padding-top: 1px; }
.experience.experience-arcade .reply-style-control legend { margin-bottom: 9px; font-size: 12px; font-weight: 750; color: var(--experience-copy); }
.experience.experience-arcade .reply-style-options { gap: 6px; }
.experience.experience-arcade .reply-style-choice { --style-fill: #efe6ff; --style-ink: #6334dd; --style-edge: #d6c2f6; --style-shadow: #d9c8f0; }
.experience.experience-arcade .reply-style-choice[data-reply-style="bold"] { --style-fill: #edffc2; --style-ink: #486012; --style-edge: #bed783; --style-shadow: #d7e5b5; }
.experience.experience-arcade .reply-style-choice[data-reply-style="genuine"] { --style-fill: #ffe6e0; --style-ink: #9c4238; --style-edge: #ecc0b8; --style-shadow: #edd1c9; }
.experience.experience-arcade .reply-style-choice[data-reply-style="spicy"] { --style-fill: #ede6f1; --style-ink: #63344f; --style-edge: #d5bfd8; --style-shadow: #dbccdf; }
.experience.experience-arcade .reply-style-tile {
  min-height: 81px; padding: 9px 2px 8px; gap: 6px; border: 1px solid var(--style-edge); border-radius: 15px;
  background: var(--style-fill); color: var(--style-ink); box-shadow: 0 3px 0 var(--style-shadow);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), background .2s, color .2s, box-shadow .2s;
}
.experience.experience-arcade .reply-style-name { font-size: 12px; line-height: 1.2; font-weight: 700; letter-spacing: -.025em; }
.experience.experience-arcade .reply-style-icon { display: grid; place-items: center; width: 27px; height: 27px; transition: transform .25s; }
.experience.experience-arcade .reply-style-choice[data-selected] .reply-style-tile { transform: translateY(-2px); box-shadow: 0 5px 0 var(--style-shadow); }
.experience.experience-arcade .reply-style-choice[data-selected] .reply-style-icon { transform: rotate(-9deg) scale(1.1); }
.experience.experience-arcade .reply-style-choice[data-selected][data-reply-style="flirty"] .reply-style-tile { background: var(--arcade-violet); border-color: #5428c5; color: #fff; --style-shadow: #46258d; }
.experience.experience-arcade .reply-style-choice[data-selected][data-reply-style="bold"] .reply-style-tile { background: var(--arcade-lime); border-color: #95b733; color: #2f3d13; --style-shadow: #b3cf63; }
.experience.experience-arcade .reply-style-choice[data-selected][data-reply-style="genuine"] .reply-style-tile { background: var(--arcade-coral); border-color: #d6746c; color: #522a29; --style-shadow: #ddaba3; }
.experience.experience-arcade .reply-style-choice[data-selected][data-reply-style="spicy"] .reply-style-tile { background: var(--arcade-ink); border-color: #30203a; color: #ffd0d5; --style-shadow: #9b7ba6; }
.experience.experience-arcade .reply-style-check { display: grid; place-items: center; right: 5px; top: 5px; }
.experience.experience-arcade .reply-style-choice:active .reply-style-tile { transform: translateY(2px); box-shadow: 0 1px 0 var(--style-shadow); }
.experience.experience-arcade .reply-style-control:disabled .reply-style-choice { cursor: default; }
.experience.experience-arcade .reply-style-description { margin: 10px 0 0; font-size: 12px; line-height: 1.45; }
.experience.experience-arcade .reply-note-shortcuts { gap: 6px; }
.experience.experience-arcade .reply-note-shortcuts button { min-height: 44px; padding: 8px 11px; border-radius: 13px; font-size: 12px; line-height: 1.3; }
.experience.experience-arcade .reply-note-shortcuts button[aria-pressed="true"] { background: var(--arcade-ink); color: #fff; border-color: var(--arcade-ink); }
.experience.experience-arcade [data-context-input="note"] { font-size: 16px; line-height: 1.45; border-color: #d7c9e6; background: #fcfaff; border-radius: 15px; }
.experience.experience-arcade [data-composer-first] { border-color: #d6c2f6; background: #efe6ff; color: #6334dd; }
.experience.experience-arcade [data-composer-add-text] { color: var(--arcade-violet); font-size: 13px; }
.experience.experience-arcade [data-tool="submit"] { min-height: 56px; border-radius: 17px; box-shadow: var(--shadow-lime); font-weight: 800; letter-spacing: -.025em; }
.experience.experience-arcade [data-tool="submit"]:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #452598; }
.experience.experience-arcade [data-composer-summary] { border-radius: 19px; background: #ffffffb3; border-color: #ded2ec; }

@keyframes arcade-photo-in { from { opacity: 0; transform: translateY(12px) rotate(-11deg); } to { opacity: 1; transform: translateY(0) rotate(-7deg); } }
@keyframes arcade-message-in { from { opacity: 0; transform: translateY(12px) rotate(7deg) scale(.96); } to { opacity: 1; transform: translateY(0) rotate(3deg) scale(1); } }
@keyframes arcade-reply-in { from { opacity: 0; transform: translateY(15px) rotate(-5deg) scale(.95); } to { opacity: 1; transform: translateY(0) rotate(-2deg) scale(1); } }
@media (hover: hover) {
  .experience.experience-arcade .reply-style-choice:hover .reply-style-tile { transform: translateY(-3px); }
  .experience.experience-arcade .home-history-card:has(.home-history-open:hover) { transform: translateY(-3px) rotate(-1deg); }
}
@media (min-width: 800px) and (min-height: 600px) {
  .experience.experience-arcade .experience-frame { background: #f5f1ff; border: 1px solid #d4c4e8; box-shadow: 0 9px 0 #e2d6f0, 0 25px 70px #4f29731a; }
  .experience.experience-arcade .experience-header { height: 83px; padding: 19px 28px; }
  .experience.experience-arcade .experience-home { padding: 23px 30px 230px; }
  .experience.experience-arcade .experience-compose { max-width: 810px; padding: 15px 32px 34px; margin: auto; }
  .experience.experience-arcade .experience-bottom { bottom: 35px; }
}
@media (min-width: 1000px) and (min-height: 600px) {
  .experience.experience-arcade .experience-home.is-empty { padding: 46px 51px 130px; column-gap: 50px; }
  .experience.experience-arcade .experience-home.is-empty h1 { font-size: clamp(39px, 4vw, 54px); }
  .experience.experience-arcade .experience-home.is-empty .home-lead { font-size: 15px; line-height: 1.6; margin: 20px 0 27px; }
  .experience.experience-arcade .experience-home.is-empty .chat-collage { margin: 0; max-width: 435px; }
  .experience.experience-arcade .experience-home.is-empty .is-showcase .collage-conversation { min-height: 335px; padding-top: 50px; gap: 28px; }
  .experience.experience-arcade .experience-home.is-empty .is-showcase .collage-incoming { font-size: 15px; padding: 17px 19px; }
  .experience.experience-arcade .experience-home.is-empty .is-showcase .collage-suggestion { padding: 18px 20px 25px; }
  .experience.experience-arcade .experience-home.is-empty .is-showcase .collage-suggestion p { font-size: 16px; }
  .experience.experience-arcade .experience-home.is-empty .home-actions { position: static; transform: none; width: 100%; max-width: 420px; padding: 0; background: none; }
  .experience.experience-arcade .experience-home:not(.is-empty) { padding: 28px 45px 230px; }
  .experience.experience-arcade .experience-home:not(.is-empty) .home-actions { max-width: 720px; }
  .experience.experience-arcade .experience-bottom { width: 365px; bottom: 43px; }
}
@media (max-height: 700px) and (orientation: portrait) {
  .experience.experience-arcade .experience-header { height: 62px; padding-block: 8px; }
  .experience.experience-arcade .experience-home { padding-top: 10px; }
  .experience.experience-arcade .experience-home.is-empty .chat-collage { margin-top: 16px; }
  .experience.experience-arcade .experience-home.is-empty .is-showcase .collage-conversation { min-height: 223px; padding-top: 30px; gap: 9px; }
  .experience.experience-arcade .experience-home.is-empty .is-showcase .collage-suggestion p { font-size: 13px; }
  .experience.experience-arcade .home-lead { font-size: 12px; margin-top: 8px; }
}
@media (max-height: 600px) and (orientation: portrait) {
  .experience.experience-arcade .experience-home.is-empty h1 { font-size: 28px; }
  .experience.experience-arcade .experience-home.is-empty .home-lead { display: none; }
  .experience.experience-arcade .experience-home.is-empty .is-showcase .collage-conversation { min-height: 204px; }
  .experience.experience-arcade .experience-home.is-empty .is-showcase .collage-incoming { padding: 10px 12px; font-size: 12px; }
  .experience.experience-arcade .experience-home.is-empty .is-showcase .collage-suggestion { padding: 10px 13px 18px; }
}
@media (max-width: 511px) {
  .experience.experience-arcade .reply-style-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .experience.experience-arcade .reply-style-tile { flex-direction: row; min-height: 54px; padding: 8px; gap: 6px; }
  .experience.experience-arcade .reply-style-icon { display: none; }
}
@media (max-width: 359px) {
  .experience.experience-arcade .experience-header { padding-inline: 12px; }
  .experience.experience-arcade .experience-wordmark { font-size: 25px; }
  .experience.experience-arcade .experience-home { padding-inline: 17px; }
  .experience.experience-arcade .experience-compose { padding-inline: 12px; }
  .experience.experience-arcade .experience-tool section[data-tool-variant] > div:first-child > div { --card-pad: 13px; }
  .experience.experience-arcade .reply-style-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .experience.experience-arcade .reply-style-tile { flex-direction: row; min-height: 54px; padding: 8px; gap: 6px; }
  .experience.experience-arcade .reply-style-name { font-size: 12px; }
  .experience.experience-arcade .reply-style-icon svg { width: 22px; height: 22px; }
  .experience.experience-arcade .home-secondary .experience-button { padding: 8px 7px; gap: 5px; }
  .experience.experience-arcade .home-secondary .home-action-icon { flex-basis: 21px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .experience.experience-arcade .experience-header { height: 58px; padding-block: 7px; }
  .experience.experience-arcade .experience-home { padding: 8px 24px 150px; }
  .experience.experience-arcade .experience-home.is-empty { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 16px; }
  .experience.experience-arcade .experience-home.is-empty h1 { font-size: 28px; }
  .experience.experience-arcade .experience-home.is-empty .chat-collage { margin: 0; }
  .experience.experience-arcade .experience-home.is-empty .is-showcase .collage-conversation { min-height: 165px; padding-top: 24px; gap: 9px; }
  .experience.experience-arcade .experience-home.is-empty .is-showcase .profile-art { width: 30%; top: 22px; height: 132px; }
  .experience.experience-arcade .experience-home.is-empty .is-showcase .collage-incoming { width: 65%; font-size: 12px; padding: 8px 12px; }
  .experience.experience-arcade .experience-home.is-empty .is-showcase .collage-suggestion { width: 80%; padding: 8px 13px 11px; }
  .experience.experience-arcade .experience-home.is-empty .is-showcase .collage-suggestion p { font-size: 12px; }
  .experience.experience-arcade .experience-home .home-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); width: calc(100% - 48px); max-width: 700px; gap: 11px; padding-top: 12px; }
  .experience.experience-arcade .home-actions > .experience-button,
  .experience.experience-arcade .home-secondary .experience-button { min-height: 51px; }
  .experience.experience-arcade .home-actions > .experience-button { font-size: 13px; gap: 8px; }
  .experience.experience-arcade .home-actions > .experience-button > .home-action-icon { width: 31px; height: 31px; flex-basis: 31px; }
  .experience.experience-arcade .experience-bottom { width: 340px; padding: 4px; bottom: 8px; border-radius: 18px; }
  .experience.experience-arcade .experience-bottom button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .experience.experience-arcade .experience-icon,
  .experience.experience-arcade .home-actions .experience-button,
  .experience.experience-arcade .experience-bottom button,
  .experience.experience-arcade .home-history-card,
  .experience.experience-arcade .home-history-enter,
  .experience.experience-arcade .reply-style-tile,
  .experience.experience-arcade .reply-style-icon { transition: none; }
  .experience.experience-arcade .experience-home.is-empty .is-showcase .profile-art,
  .experience.experience-arcade .experience-home.is-empty .is-showcase .collage-incoming,
  .experience.experience-arcade .experience-home.is-empty .is-showcase .collage-suggestion { animation: none; }
}

/* Assembled into the one content-addressed /app stylesheet at release. */
.experience.experience-arcade .arcade-result { gap: 14px; }
.experience.experience-arcade .arcade-reply-navigation [data-reply-refinement="bolder"] { background: var(--arcade-lime); color: var(--arcade-ink); border-color: #a4c651; font-weight: 800; }
.experience.experience-arcade .arcade-result [data-result-heading] { font-size: clamp(1.65rem, 4vw, 2.3rem); font-weight: 850; letter-spacing: -.045em; }
.experience.experience-arcade .arcade-reply {
  position: relative; isolation: isolate; padding: 18px; border: 1px solid #3b2b61; border-radius: 26px;
  background: #241b35; color: #fff; box-shadow: 0 7px 0 #d9d1ec, 0 18px 38px #3b226b18;
  --color-ink: #fff; --color-muted: #d6cbea; --color-accent: #dcff70;
  --color-tone-ink: #e7dcff; --color-tone-fill: #443156; --color-best: transparent;
  --color-raised: #443156; --color-line-strong: #a590b9;
}
.experience.experience-arcade .arcade-reply::before {
  content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse at 100% 0%, #7542cb70, transparent 65%);
}
.experience.experience-arcade .arcade-reply-kicker { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.experience.experience-arcade .arcade-reply-kicker > span:first-child { display: flex; align-items: center; gap: 6px; font-size: .7rem; line-height: 1.2; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; color: #dcff70; }
.experience.experience-arcade .arcade-reply-kicker svg { width: 17px; height: 17px; }
.experience.experience-arcade .arcade-reply-number { font-size: .75rem; font-weight: 800; color: #d6cbea; font-variant-numeric: tabular-nums; }
.experience.experience-arcade .arcade-result[data-reply-voice="genuine"] .arcade-reply-kicker > span:first-child { color: #ffb3a4; }
.experience.experience-arcade .arcade-result[data-reply-voice="spicy"] .arcade-reply-kicker > span:first-child { color: #ffbbd9; }
.experience.experience-arcade .arcade-reply-content { animation: arcade-reply-enter .35s cubic-bezier(.2,.75,.25,1) both; }
.experience.experience-arcade .arcade-reply li { padding: 0; background: transparent; border: 0; box-shadow: none; animation: none; }
.experience.experience-arcade .arcade-reply [data-quick-wait] { border-color: #776187; line-height: 1.55; }
.experience.experience-arcade .arcade-reply li > div:first-child { gap: 7px; }
.experience.experience-arcade .arcade-reply li > div:last-child:empty { display: none; }
.experience.experience-arcade .arcade-reply .reply-copy-bubble {
  padding: 13px 0 7px; background: transparent; color: #fff; border: 0; border-radius: 14px;
  font-size: clamp(1.2rem, 4vw, 1.65rem); line-height: 1.38; font-weight: 750; letter-spacing: -.025em; box-shadow: none;
  transition: background .2s, color .2s, padding .2s, transform .2s;
}
.experience.experience-arcade .arcade-reply .reply-copy-feedback { color: #d6cbea; font-size: .7rem; letter-spacing: .025em; font-weight: 650; }
.experience.experience-arcade .arcade-reply .reply-copy-bubble:hover { background: #ffffff0b; }
.experience.experience-arcade .arcade-reply .reply-copy-bubble[data-state="copied"] { color: #241b35; background: #dcff70; padding-inline: 12px; box-shadow: 0 0 0 4px #dcff701c; animation: arcade-copy-pop .3s ease both; }
.experience.experience-arcade .arcade-reply .reply-copy-bubble[data-state="copied"] .reply-copy-feedback { color: #3c4b16; }
.experience.experience-arcade .arcade-reply .reply-copy-bubble[data-state="failed"] { color: #fff; background: #703447; padding-inline: 12px; }
.experience.experience-arcade .arcade-reply .reply-messages { gap: 8px; padding-top: 6px; }
.experience.experience-arcade .arcade-reply .reply-messages .reply-copy-bubble {
  padding: 10px 14px 11px; border-radius: 18px 18px 6px 18px; font-size: clamp(1.05rem, 3.6vw, 1.4rem); line-height: 1.32;
}
.experience.experience-arcade .arcade-reply .reply-messages .reply-copy-bubble[data-state="idle"] { background: #ffffff17; }
.experience.experience-arcade .arcade-reply .reply-messages .reply-copy-bubble[data-state="idle"]:hover { background: #ffffff24; }
.experience.experience-arcade .arcade-reply .reply-messages-hint { margin-top: -2px; }
.experience.experience-arcade .arcade-result [data-composer-next] { padding-block: 10px; background: transparent; border: 0; box-shadow: none; gap: 9px; }
.experience.experience-arcade .arcade-result [data-composer-next] > button[data-state],
.experience.experience-arcade .arcade-result [data-composer-next] > [data-composer-followup] { min-height: 52px; border-radius: 17px; color: #241b35; background: #dcff70; box-shadow: 0 4px 0 #accb46; font-weight: 850; font-size: 1rem; border: 1px solid #a8c940; }
.experience.experience-arcade .arcade-result [data-composer-next] > button[data-state="copied"] { background: #c5f5d9; border-color: #56846b; box-shadow: 0 4px 0 #98c4ad; animation: arcade-copy-pop .3s ease both; }
.experience.experience-arcade .arcade-result [data-composer-next] > button[data-state="copied"]::after { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; pointer-events: none; background: #6334dd; box-shadow: -60px -15px #6334dd, 60px -15px #6334dd, -95px 5px #6334dd, 95px 5px #6334dd, -35px 18px #6334dd, 35px 18px #6334dd; animation: arcade-copy-sparks .6s ease-out both; }
.experience.experience-arcade .arcade-result [data-composer-next] > button[data-state="failed"] { background: #ffdedf; border-color: #b35867; }
.experience.experience-arcade .arcade-reply-navigation button { min-height: 46px; border-radius: 15px; background: #fff; border: 1.5px solid #ada0c6; box-shadow: 0 3px 0 #e0d7f0; overflow-wrap: normal; word-break: normal; }
.experience.experience-arcade .arcade-reply-navigation button:hover:not([aria-disabled="true"]) { background: #eee7ff; transform: translateY(-1px); }
.experience.experience-arcade .arcade-reply-navigation button:hover:not([aria-disabled="true"]) svg { transform: rotate(-35deg); }
.experience.experience-arcade .arcade-reply-navigation svg { transition: transform .25s; }
.experience.experience-arcade .arcade-reply-navigation [data-reply-previous] { flex: 0 0 46px; padding: 0; }
.experience.experience-arcade .arcade-reply-navigation [data-reply-previous]:hover:not([aria-disabled="true"]) svg { transform: translateX(-2px); }
.experience.experience-arcade .arcade-result-loading { border-radius: 18px; background: #ebe2ff; padding: 10px 12px; border: 1px solid #b8a3dd; }
.experience.experience-arcade .arcade-result [data-reply-refinements] { border-radius: 19px; background: #ffffffa8; border-color: #b4a7cb; padding-inline: 15px; }
.experience.experience-arcade .arcade-result [data-reply-refinements] summary { font-weight: 800; }
.experience.experience-arcade .arcade-result [data-reply-refinement] { border-radius: 13px; box-shadow: 0 2px 0 #e5dcf2; }
.experience.experience-arcade .arcade-result [data-composer-followup] { color: #4b2a9b; background: #e7ddfb; border-color: #b9a2e6; }
.experience.experience-arcade .arcade-result [data-feedback] { padding-inline: 6px; }
.experience.experience-arcade .arcade-details { padding: 0; gap: 12px; }
.experience.experience-arcade .arcade-details > [data-conversation-details] { min-height: 76px; padding: 13px 15px; border-radius: 22px; border: 1.5px solid #b4a0d5; background: linear-gradient(110deg, #f8f3ff, #e9dcff); box-shadow: 0 4px 0 #ded0ee; text-align: left; }
.experience.experience-arcade .arcade-details > [data-conversation-details] > span { width: 100%; justify-content: flex-start; gap: 13px; }
.experience.experience-arcade .arcade-details-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 14px; color: #dcff70; background: #6b3ff5; box-shadow: 3px 3px 0 #ccbae9; transform: rotate(-7deg); }
.experience.experience-arcade .arcade-details-icon svg { width: 25px; height: 25px; }
.experience.experience-arcade .arcade-details-label { display: grid; gap: 4px; flex: 1; }
.experience.experience-arcade .arcade-details-label strong { font-size: .95rem; line-height: 1.25; font-weight: 850; }
.experience.experience-arcade .arcade-details-label small { font-size: .75rem; font-weight: 600; color: #68507d; }
.experience.experience-arcade .arcade-details-arrow { flex-shrink: 0; transition: transform .2s; }
.experience.experience-arcade .arcade-details > [data-conversation-details][aria-expanded="true"] .arcade-details-arrow { transform: rotate(180deg); }
.experience.experience-arcade .arcade-details [data-conversation-source] { padding: 0 14px 4px; border: 1px dashed #b4a7cb; border-radius: 18px; background: #ffffff80; }
.experience.experience-arcade .arcade-analysis { display: grid; gap: 12px; animation: arcade-details-enter .32s ease both; }
.experience.experience-arcade .arcade-vibe { position: relative; display: flex; gap: 15px; align-items: center; padding: 19px 16px; border-radius: 24px; color: #fff; background: #241b35; overflow: clip; }
.experience.experience-arcade .arcade-vibe-ring { position: relative; flex: 0 0 106px; width: 106px; height: 106px; color: #dcff70; }
.experience.experience-arcade .arcade-vibe-ring > svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.experience.experience-arcade .arcade-vibe-ring circle { fill: none; stroke-width: 7; }
.experience.experience-arcade .arcade-vibe-track { stroke: #554368; }
.experience.experience-arcade .arcade-vibe-fill { stroke: currentColor; stroke-linecap: round; stroke-dasharray: var(--vibe-progress) 1; animation: arcade-vibe-fill .9s cubic-bezier(.2,.75,.25,1) both; }
.experience.experience-arcade .arcade-vibe-ring > span { position: absolute; inset: 0; display: flex; justify-content: center; align-items: baseline; padding-top: 22px; }
.experience.experience-arcade .arcade-vibe-ring strong { font-size: 2.6rem; line-height: 1.3; font-weight: 850; letter-spacing: -.07em; }
.experience.experience-arcade .arcade-vibe-ring small { font-size: .75rem; color: #e1d2f1; font-weight: 700; margin-left: 3px; }
.experience.experience-arcade .arcade-vibe[data-vibe-band="0"] .arcade-vibe-ring { color: #ffa994; }
.experience.experience-arcade .arcade-vibe[data-vibe-band="1"] .arcade-vibe-ring { color: #d5b5ff; }
.experience.experience-arcade .arcade-vibe[data-vibe-band="unknown"] .arcade-vibe-ring { color: #e1d2f1; }
.experience.experience-arcade .arcade-vibe-caption { position: relative; z-index: 1; min-width: 0; }
.experience.experience-arcade .arcade-kicker { font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #d5b5ff; margin: 0 0 6px; }
.experience.experience-arcade .arcade-vibe-caption h3 { font-size: clamp(1.15rem, 4vw, 1.65rem); font-weight: 850; line-height: 1.1; letter-spacing: -.035em; margin: 0 0 8px; }
.experience.experience-arcade .arcade-vibe-caption > p:last-child { color: #e1d2f1; font-size: .7rem; line-height: 1.5; }
.experience.experience-arcade .arcade-vibe-spark { position: absolute; width: 125px; height: 125px; right: -24px; top: -30px; color: #6b3ff5; opacity: .28; transform: rotate(10deg); }
.experience.experience-arcade .arcade-analysis-summary { padding: 17px; border-radius: 20px; background: #fff; border: 1px solid #c5b8db; font-size: .95rem; line-height: 1.65; box-shadow: 0 4px 0 #ebe2f5; }
.experience.experience-arcade .arcade-signals { display: grid; gap: 9px; }
.experience.experience-arcade .arcade-signal { display: flex; gap: 11px; padding: 14px; border-radius: 19px; font-size: .85rem; font-weight: 650; line-height: 1.5; align-items: flex-start; background: #e4f3de; border: 1px solid #8bac83; color: #294c32; }
.experience.experience-arcade .arcade-signal-icon { display: grid; flex: 0 0 29px; height: 29px; place-items: center; border-radius: 10px; background: #c2e3b5; color: #294c32; }
.experience.experience-arcade .arcade-signal[data-insight-signal="minus"] { background: #ffebe5; border-color: #c09a8f; color: #753e36; }
.experience.experience-arcade .arcade-signal[data-insight-signal="minus"] .arcade-signal-icon { background: #ffd5c8; color: #753e36; }
@keyframes arcade-reply-enter { from { opacity: 0; transform: translateY(8px) rotate(-.7deg); } to { opacity: 1; transform: none; } }
@keyframes arcade-copy-pop { 50% { transform: scale(.98); } }
@keyframes arcade-copy-sparks { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.3); } }
@keyframes arcade-details-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes arcade-vibe-fill { from { stroke-dasharray: 0 1; } to { stroke-dasharray: var(--vibe-progress) 1; } }
@media (max-width: 359px) {
  .experience.experience-arcade .arcade-reply { padding: 15px; border-radius: 22px; }
  .experience.experience-arcade .arcade-reply-navigation svg { flex-shrink: 0; }
  .experience.experience-arcade .arcade-vibe { gap: 11px; padding: 16px 12px; }
  .experience.experience-arcade .arcade-vibe-ring { flex-basis: 88px; width: 88px; height: 88px; }
  .experience.experience-arcade .arcade-vibe-ring > span { padding-top: 18px; }
  .experience.experience-arcade .arcade-vibe-ring strong { font-size: 2.15rem; }
}
@media (max-width: 511px) {
  .experience.experience-arcade .arcade-reply-navigation button { padding-inline: 8px; }
  /* Labels only on phones; Previous is an icon and keeps it. */
  .experience.experience-arcade .arcade-reply-navigation button:not([data-reply-previous]) svg { display: none; }
}
/* Short screens show the reply first; a multi-row sticky dock would cover its text. */
@media (max-width: 959px) and (max-height: 500px) {
  .experience.experience-arcade .arcade-result [data-composer-next][data-action-dock] { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .experience.experience-arcade .arcade-result [data-composer-next] > button[data-state="copied"]::after { display: none; }
  .experience.experience-arcade .arcade-reply-content,
  .experience.experience-arcade .arcade-analysis,
  .experience.experience-arcade .arcade-vibe-fill,
  .experience.experience-arcade .arcade-result [data-composer-next] > button[data-state="copied"]::after,
  .experience.experience-arcade .arcade-result [data-state="copied"] { animation: none; }
  .experience.experience-arcade .arcade-result button,
  .experience.experience-arcade .arcade-result svg { transition: none; }
  .experience.experience-arcade .arcade-reply-navigation button:hover:not([aria-disabled="true"]),
  .experience.experience-arcade .arcade-reply-navigation button:hover:not([aria-disabled="true"]) svg,
  .experience.experience-arcade .arcade-reply-navigation [data-reply-previous]:hover:not([aria-disabled="true"]) svg { transform: none; }
}

/* END ARCADE SOURCES */