/* Ask Bin only: an editorial canvas with a persistent bottom interaction area. */
:root {
  color-scheme: light;
  --paper: #f7f6f2;
  --ink: #232321;
  --secondary: #757570;
  --border: #deded8;
  --surface: #eeede7;
  --accent: #8052ff;
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.22, .68, .2, 1);
  --text-utility: 14px;
  --text-navigation: 15px;
  --text-input: 16px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; background: none; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }
p, h1, h2 { margin: 0; }
svg { display: block; }
[hidden] { display: none !important; }
::selection { color: var(--ink); background: #e3d8ff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 10; padding: 12px 18px; background: var(--ink); color: white; border-radius: 8px; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.experience { width: 100%; height: 100vh; height: 100dvh; display: grid; grid-template-rows: 82px minmax(0, 1fr) auto; overflow: hidden; }
.page-header { display: flex; align-items: center; gap: 28px; width: 100%; max-width: 1440px; padding-inline: 64px; margin-inline: auto; }
.wordmark { font-size: 18px; font-weight: 500; letter-spacing: -.06em; }
.wordmark > span { margin-left: 1px; }
.portfolio-link { margin-left: auto; color: var(--secondary); font-size: var(--text-navigation); }
.portfolio-link > span { margin-left: 12px; }
.portfolio-link:hover { color: var(--ink); }
.start-over { margin-left: auto; padding: 8px 0; border: 0; font-size: var(--text-navigation); color: var(--secondary); }
.start-over:not([hidden]) + .portfolio-link { margin-left: 0; }
.start-over > span { margin-right: 6px; }
.start-over:hover { color: var(--ink); }
.stage { position: relative; min-height: 0; container-type: size; }
.landing { height: 100%; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); opacity: 1; transform: translateY(0); transition: opacity .36s var(--ease), transform .45s var(--ease); scrollbar-width: thin; scrollbar-color: #d7d7cf transparent; }
/* Match the dock's 960px content grid, while giving the portrait room to the right. */
.landing-inner { --hero-left: max(44px, calc((100vw - 960px) / 2)); --hero-right: max(16px, calc((100vw - 1440px) / 2)); height: 100%; min-height: 460px; padding: 18px var(--hero-right) 12px var(--hero-left); margin-inline: auto; display: grid; grid-template-columns: 366px minmax(0, 1fr); gap: 24px; align-items: center; }
.introduction { padding-bottom: 8px; }
h1 { font-size: clamp(94px, 9.2vw, 137px); font-weight: 400; line-height: .92; letter-spacing: -.078em; }
h1:focus { outline: none; }
.intro-name { color: var(--accent); }
.intro-copy { max-width: 330px; margin-top: 28px; color: #666660; font-size: clamp(24px, 1.8vw, 26px); font-weight: 300; line-height: 1.4; letter-spacing: -.015em; }
.invitation { margin-top: 30px; color: var(--secondary); font-size: var(--text-navigation); }
.intro-actions { display: flex; align-items: center; gap: 13px; margin-top: 14px; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 38px; padding: 9px 17px; border: 1px solid var(--border); border-radius: 30px; background: transparent; font-size: var(--text-utility); white-space: nowrap; transition: border-color .2s, background .2s, transform .2s; }
.pill:hover:not(:disabled) { border-color: var(--ink); transform: translateY(-1px); }
.pill-dark { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.pill-dark:hover { background: #42423e; }
.or { font-size: var(--text-utility); color: #90908a; }
.portrait { position: relative; align-self: stretch; min-height: 0; min-width: 0; display: flex; align-items: flex-end; justify-content: flex-end; }
.character { position: relative; flex-shrink: 0; display: grid; place-items: center; overflow: hidden; }
/* About 1.7× at desktop sizes; fit smaller stages without clipping the artwork. */
.character--portrait { transform: translateX(-40px); width: min(900px, calc(100vw - var(--hero-left) - var(--hero-right) - 306px), calc((100cqh - 30px) * 1.5)); height: auto; aspect-ratio: 1536 / 1024; overflow: visible; }
.character-image { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; display: block; }
/* The supplied PNG provides transparency; no container fill or blending needed. */
/* A shared 625:368 artwork frame inside the unchanged 1536:1024 portrait slot.
   Keep every source contained, centered and on the same bottom baseline. */
.character--portrait .character-image { position: absolute; inset: auto 0 0; height: 88.32%; transform: translate(var(--portrait-x, 0px), var(--portrait-y, 0px)); transition: transform .35s var(--ease); }
.character--portrait[data-state="guide"] .character-image { transform: translate(2px, 3px); }
.landing-video, .landing-video-still { position: absolute; inset: auto 0 0; display: block; width: 100%; height: 88.32%; object-fit: contain; object-position: center bottom; transform: scale(1.08); transform-origin: center bottom; pointer-events: none; }
.wave-video { opacity: 0; }
.wave-video[data-visible="true"] { opacity: 1; }
.character--portrait[data-video-intro="active"] picture { visibility: hidden; }
.character--avatar { width: 39px; height: 39px; border-radius: 50%; background: var(--surface); }
/* Equal-axis scaling preserves proportions; this window frames the hair and head. */
.character--avatar .character-image { position: absolute; width: 125%; height: 125%; max-width: none; left: -12.5%; top: -4%; object-fit: cover; object-position: center; }
.character[data-state="thinking"] .character-image { animation: thinking 1.2s ease-in-out infinite; }
/* A note and its optional camera prompt overlay the portrait without moving it. */
.wave-discovery { position: absolute; z-index: 1; right: 1%; top: 23%; }
.wave-cue { min-width: calc(5.9257em + 12px); text-align: left; transform: translate(5px, 35px); padding: 4px 6px; border: 0; background: none; color: var(--accent); font: 400 clamp(18px, 1.5vw, 22px)/1.2 'Bradley Hand', 'Segoe Print', 'Comic Sans MS', cursive; white-space: nowrap; }
.wave-cue:disabled { cursor: default; }
.wave-cue[data-success="true"] { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.wave-cue svg { width: 76px; height: 38px; margin-left: 0; transform: translateY(18px) rotate(90deg); pointer-events: none; }
.wave-cue path { stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.wave-prompt { position: absolute; z-index: 3; right: 2%; bottom: 4%; width: min(288px, calc(100vw - 32px)); max-height: calc(100cqh - 24px); overflow-y: auto; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--paper); text-align: left; animation: wave-prompt-in .2s var(--ease); }
.wave-prompt h2 { font-size: 16px; font-weight: 500; line-height: 1.4; }
.wave-prompt p { margin-top: 10px; color: var(--secondary); font-size: var(--text-utility); line-height: 1.5; }
.wave-actions { display: flex; align-items: center; gap: 18px; margin-top: 16px; }
.wave-dismiss { padding: 8px 0; border: 0; font-size: var(--text-utility); color: var(--secondary); }
.wave-dismiss:hover { color: var(--ink); }
.camera-controls { position: absolute; right: 6px; bottom: 100%; display: grid; justify-items: end; gap: 3px; margin-bottom: 8px; font-size: var(--text-utility); color: var(--secondary); white-space: nowrap; }
.camera-controls button { padding: 0; border: 0; color: inherit; font-size: inherit; }
.camera-controls button:hover { color: var(--accent); }
.wave-feedback { position: absolute; right: 0; top: 100%; width: min(240px, calc(100vw - 32px)); color: var(--secondary); font-size: var(--text-utility); line-height: 1.5; }
/* Only created by ?debugWave=1; fixed overlay never participates in the hero grid. */
.wave-debug { position: fixed; z-index: 20; top: 66px; left: 12px; width: min(300px, calc(100vw - 24px)); max-height: calc(100dvh - 250px); overflow: auto; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--paper); color: var(--secondary); font: 12px/1.5 ui-monospace, monospace; }
.wave-debug summary { cursor: pointer; }
.wave-debug pre { margin: 8px 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.wave-debug button { padding: 5px 0; border: 0; font: inherit; color: var(--accent); text-decoration: underline; }
@keyframes wave-prompt-in { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
/* Both modes reserve space for the same dock; it never covers the answers. */
.interaction-dock { position: relative; z-index: 2; background: var(--paper); padding: 20px 44px max(22px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(35,35,33,.045); }
.dock-inner { --contact-width: 143px; --row-gap: 20px; max-width: 960px; margin-inline: auto; }
.topic-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 13px; }
.topic-pills button { padding: 7px 15px; min-height: 33px; border: 1px solid var(--border); border-radius: 30px; background: transparent; font-size: var(--text-utility); color: #62625d; transition: border-color .2s, background .2s; }
.topic-pills button:hover { border-color: #b1a4ca; background: #f0ecf6; }
.interaction-row { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--row-gap); align-items: center; }
.email-identity { display: flex; align-items: center; gap: 11px; width: fit-content; white-space: nowrap; font-size: 12px; }
.email-identity:hover { color: var(--accent); }
.composer { display: flex; align-items: center; gap: 12px; min-height: 53px; padding: 8px 9px 8px 22px; background: #fdfcf9; border: 1px solid #d7d7d0; border-radius: 32px; transition: border-color .2s, box-shadow .2s; }
.composer:focus-within:not([data-typing="true"]), .composer[data-guide="true"], .composer[data-wave="true"] { border-color: #a68bcf; box-shadow: 0 0 0 3px rgba(128,82,255,.055); }
.composer input { width: 100%; min-width: 0; padding: 4px 0; border: 0; outline: none; color: var(--ink); background: transparent; font-size: var(--text-input); }
.composer input::placeholder { color: #909089; opacity: 1; }
.submit-button { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #e9e8e1; color: #74746b; transition: color .2s, background .2s; }
.submit-button:hover { background: #e5dcf7; color: #5c3d9c; }
.submit-button svg { width: 21px; height: 21px; }
.submit-button path { stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.dock-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin: 11px 4px 0; }
.suggestion { color: #8e8e86; font-size: var(--text-utility); }
.suggestion button { padding: 0; border: 0; text-align: left; color: #73736d; font-size: inherit; }
.suggestion button:hover { color: #6d48a9; }
.demo-note { color: #999990; font-size: var(--text-utility); white-space: nowrap; }
.noscript-note { margin-top: 10px; font-size: var(--text-utility); color: var(--secondary); }
/* Conversation replaces the landing in the same stage, above the same dock. */
body[data-mode="conversation"] .landing { opacity: 0; transform: translateY(-65px); pointer-events: none; }
.conversation { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d7d7cf transparent; opacity: 0; transform: translateY(22px); }
body[data-mode="conversation"] .conversation { opacity: 1; transform: translateY(0); transition: opacity .45s .12s var(--ease), transform .45s .12s var(--ease); }
.conversation:focus-visible { outline-offset: -5px; }
.conversation-feed { max-width: 1048px; margin-inline: auto; padding: 30px 44px 60px; }
.conversation-turn { padding: 12px 0 40px; scroll-margin-top: 28px; }
.conversation-turn:last-child { min-height: calc(100cqh - 60px); }
.conversation-turn + .conversation-turn { padding-top: 38px; border-top: 1px solid var(--border); }
.visitor-question { max-width: 640px; margin-left: auto; margin-bottom: 35px; text-align: right; color: var(--secondary); font-weight: 400; font-size: var(--text-input); line-height: 1.7; overflow-wrap: anywhere; }
.friend-identity { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.friend-identity .character--avatar { width: 45px; height: 45px; }
.friend-label { font-size: 10px; font-weight: 500; letter-spacing: .12em; color: #717169; }
.friend-f { font: italic 23px/1 Georgia, serif; letter-spacing: -.09em; margin-right: 7px; color: var(--ink); }
.answer-content:focus { outline: none; }
.answer-text { max-width: 800px; font-size: clamp(22px, 2.05vw, 29px); font-weight: 300; line-height: 1.62; letter-spacing: -.025em; overflow-wrap: anywhere; }
.conversation-turn[data-pending="true"] .answer-text { color: #9b9b91; }
.answer-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.next-step { display: block; margin-top: 28px; padding: 5px 0; border: 0; font-size: var(--text-navigation); color: #696962; text-align: left; }
.next-step::after { content: ' ↗'; margin-left: 10px; }
.next-step:hover { color: var(--accent); }
.beyond-links { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 28px; }
.beyond-links .next-step { margin-top: 0; }
.answer-inline-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.answer-inline-link:hover { color: var(--accent); }
@keyframes thinking { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@media (min-width: 761px) and (max-height: 760px) {
  .experience { grid-template-rows: 65px minmax(0, 1fr) auto; }
  .landing-inner { min-height: 405px; padding-top: 5px; padding-bottom: 12px; }
  h1 { font-size: clamp(86px, 8vw, 112px); }
  .intro-copy { margin-top: 20px; max-width: 350px; }
  .invitation { margin-top: 22px; }
  .interaction-dock { padding-top: 15px; padding-bottom: 18px; }
}
@media (max-width: 1050px) {
  .page-header { padding-inline: 36px; }
  h1 { font-size: 99px; }
}
@media (max-width: 760px) {
  .experience { grid-template-rows: 68px minmax(0, 1fr) auto; }
  .page-header { padding-inline: 26px; gap: 22px; }
  .wordmark { font-size: 17px; }
  .portfolio-link, .start-over { font-size: var(--text-utility); }
  .landing-inner { height: auto; min-height: 100%; grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 26px 22px 18px; }
  .introduction { padding: 0; }
  h1 { font-size: clamp(80px, 19vw, 112px); line-height: .94; }
  .intro-copy { font-size: clamp(18px, 4.8vw, 22px); line-height: 1.4; margin-top: 22px; max-width: 370px; }
  .invitation { margin-top: 24px; font-size: var(--text-navigation); }
  .intro-actions { margin-top: 12px; }
  .pill { min-height: 37px; font-size: var(--text-utility); padding: 8px 15px; }
  .portrait { min-height: 0; justify-content: center; }
  /* A full-width mobile media section. Both videos and held frames share one
     grid cell, keeping the full composition stable without desktop offsets. */
  .character--portrait { width: 100vw; max-width: none; aspect-ratio: 1024 / 848; transform: none; }
  .character--portrait picture { position: absolute; inset: 0; }
  .landing-video, .landing-video-still { position: static; inset: auto; grid-area: 1 / 1; width: 100%; height: auto; aspect-ratio: 1024 / 848; object-fit: contain; transform: none; }
  .wave-discovery { right: 4%; top: 5%; }
  .wave-cue { min-width: 0; padding-inline: 0; transform: none; }
  body[data-mode="landing"] .dock-caption { display: none; }
  .interaction-dock { padding: 16px 22px max(18px, env(safe-area-inset-bottom)); }
  .dock-inner { --contact-width: 89px; --row-gap: 10px; }
  .topic-pills { margin-left: 0; justify-content: center; gap: 7px; margin-bottom: 13px; }
  .topic-pills button { font-size: var(--text-utility); padding: 7px 12px; }
  .email-identity { gap: 6px; font-size: 9px; }
  .character--avatar { width: 27px; height: 27px; }
  .dock-or { font-size: 9px; }
  .composer { min-height: 48px; padding: 7px 7px 7px 14px; gap: 6px; }
  .composer input { font-size: var(--text-input); }
  .submit-button { width: 30px; height: 30px; flex-basis: 30px; }
  .submit-button svg { width: 19px; height: 19px; }
  .dock-caption { display: block; margin: 11px 0 0; text-align: center; }
  .suggestion { font-size: var(--text-utility); }
  .demo-note { margin-top: 5px; font-size: var(--text-utility); }
  .conversation-feed { padding: 26px 22px 36px; }
  .conversation-turn { padding-top: 0; padding-bottom: 32px; }
  .visitor-question { font-size: var(--text-input); margin-bottom: 26px; }
  .friend-identity { margin-bottom: 16px; }
  .answer-text { font-size: 23px; line-height: 1.6; }
  .answer-actions { gap: 8px; }
}
@media (max-width: 360px) {
  .page-header { padding-inline: 22px; gap: 13px; }
  .landing-inner { padding-inline: 14px; }
  .intro-actions { gap: 6px; }
  .intro-actions .pill { padding-inline: 12px; }
  .topic-pills button { padding-inline: 10px; }
  .interaction-dock { padding-inline: 14px; }
  .dock-inner { --row-gap: 8px; }
  .email-identity { gap: 4px; }
  .composer { padding-left: 11px; }
  .conversation-feed { padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .character--portrait .character-image, .character--portrait[data-state="guide"] .character-image, .pill:hover:not(:disabled) { transform: none; }
}