/* MURKEEN / visual system v2. Mobile browser first, inked creature + graphic sticker energy. */
:root {
  color-scheme:dark;
  --paper:#17141e; --ink:#f9f3ef; --muted:#b3aeba;
  --acid:#ff85b3; --border:#49414e; --coral:#ff85b3; --teal:#bdf7cf;
}
* { -webkit-tap-highlight-color:transparent; }
html { min-height:100%; background:#101017; }
body { background:#101017; color:var(--ink); }
.app { max-width:480px; min-height:100svh; padding:max(env(safe-area-inset-top),12px) 20px max(env(safe-area-inset-bottom),24px);
  background:radial-gradient(ellipse at 110% 5%,#322337 0,transparent 42%),#17141e; }
.topbar { height:56px; gap:8px; }
.mark { width:auto; min-width:0; height:48px; display:flex; align-items:center; gap:8px; text-decoration:none; }
.brand-icon { width:31px; height:31px; display:grid; place-items:center; background:#ff8db7; color:#1f1823;
  border-radius:11px 13px 7px 11px; transform:rotate(-8deg); font-size:26px; font-weight:1000; letter-spacing:-3px; line-height:1; }
.brand-icon span { color:#fbf3ee; }
.brand-name { font-size:26px; font-weight:950; letter-spacing:-1.8px; line-height:1; }
.build { color:#b6a7b9; font-size:8px; line-height:1; letter-spacing:1px; margin-left:auto; white-space:nowrap; }
.build i { background:#332b38; color:#ff87b5; font-weight:850; }
.account-pill { background:#f9f2ef; color:#1c1822; border:0; border-radius:100px; min-height:36px;
 padding:7px 13px; font-size:11px; font-weight:850; }
.topbar>.icon-btn { min-width:37px; width:37px; height:37px; border:1px solid #59505e; color:#e5d9e5; font-size:19px; }
.screen { padding-top:24px; }
.headline .eyebrow { display:flex; align-items:center; gap:7px; color:#c4facf; font-size:9px; letter-spacing:1.45px; font-weight:900; }
.live-pulse { width:8px; height:8px; display:inline-block; border-radius:50%; background:#baf6cb; box-shadow:0 0 0 4px #baf6cb19; }
.headline h1 { font-size:clamp(64px,17vw,79px); margin:12px 0 10px; line-height:.87; letter-spacing:-4px; font-weight:1000; }
.title-highlight { color:#ff8db7; position:relative; }
.title-spark { display:inline-block; transform:rotate(-12deg) translateY(-9px); font-size:.46em; vertical-align:top; color:#bef6cf; margin-left:5px; }
.headline p { color:#d1c5d1; font-size:13px; line-height:1.4; margin:15px 0 0; letter-spacing:-.1px; }
.avatar-preview { position:relative; height:clamp(255px,35svh,330px); overflow:hidden; isolation:isolate;
 margin:21px 7px 23px 0; border-radius:32px 32px 48px 24px;
 background:#f7cfc4; border:3px solid #130d18; box-shadow:7px 7px 0 #f480ac; }
.avatar-preview:before { content:''; position:absolute; width:290px; height:290px; top:28px; left:50%; border:3px dashed #cd8d9b80;
 transform:translateX(-50%) rotate(22deg); border-radius:50%; z-index:0; }
.avatar-preview:after { content:''; position:absolute; width:68px; height:68px; right:-25px; bottom:-34px; background:#bbf6ce; transform:rotate(15deg); }
.hero-avatar { position:absolute; bottom:-61px; left:49%; transform:translateX(-50%) rotate(-3deg); width:330px; height:330px; z-index:1; filter:drop-shadow(0 6px 0 #341c3025); }
.hero-scratch { position:absolute; z-index:2; color:#281622; font-family:monospace; font-weight:900; pointer-events:none; }
.hero-scratch-1 { top:18px; right:20px; font-size:53px; transform:rotate(13deg); }
.hero-scratch-2 { bottom:55px; left:14px; font-size:46px; color:#ff418b; transform:rotate(17deg); }
.hero-dialogue { position:absolute; top:35px; left:18px; z-index:3; width:59px; height:48px; border:3px solid #281b2a;
 background:#fff8f0; color:#271c27; border-radius:48% 44% 52% 32%; display:grid; place-items:center;
 font-size:27px; font-weight:950; transform:rotate(-17deg); }
.hero-dialogue:after { content:''; width:13px; height:10px; background:#fff8f0; border:3px solid #281b2a;
 border-top:0; border-left:0; position:absolute; bottom:-8px; right:13px; transform:rotate(30deg); }
.avatar-caption { position:absolute; top:auto; bottom:18px; left:14px; z-index:4; background:#221827; color:#fff9f1;
 padding:7px 10px; border-radius:7px; letter-spacing:.9px; font-weight:900; font-size:9px; transform:rotate(-4deg); }
.edit-avatar { z-index:4; bottom:14px; right:14px; background:#fff7f0; color:#231b25; border:2px solid #241c24;
 font-size:12px; font-weight:850; height:40px; padding:0 12px; box-shadow:2px 3px 0 #241c24; }
.edit-avatar span { font-size:19px; }
.hero-actions { display:flex; flex-direction:column; gap:8px; margin:3px 0 14px; }
.beta-note { text-align:center; color:#9f95a5; font-size:10px; margin-top:4px; letter-spacing:.2px; }
.primary { border-radius:15px; min-height:56px; background:#ff8db7; color:#241824; font-weight:900; font-size:16px;
 box-shadow:3px 4px 0 #08070a; padding:13px 17px; border:2px solid #ff8db7; }
.primary>span:last-child { font-size:24px; font-weight:700; }
.primary:active { transform:translate(2px,2px); box-shadow:1px 2px 0 #08070a; }
.secondary { color:#e9deeb; background:#292431; border:1px solid #56505c; border-radius:14px; min-height:47px; font-size:13px; font-weight:750; }
body:not(.account-ready) #profile-form { display:none; }
body.account-ready #hero-actions { display:none; }
body.account-ready .avatar-preview { height:210px; margin-top:16px; }
body.account-ready .hero-avatar { width:270px; height:270px; bottom:-55px; }
body.account-ready .headline h1 { font-size:55px; }
body.account-ready .screen.welcome { padding-top:10px; }
body.account-ready #profile-form { margin-top:13px; border-top:1px dashed #564650; padding-top:3px; }
.section-label { margin:24px 0 12px; }
.section-label h2 { font-size:22px; font-weight:900; letter-spacing:-.7px; }
.section-label>span { color:#a99bac; letter-spacing:.4px; }
label { color:#c9bbcc; font-size:11px; font-weight:650; }
input:not([type=checkbox]),select { border:1px solid #57505b; border-radius:14px; background:#28232f; color:#fff9f6; min-height:47px; }
input::placeholder { color:#938896; }
.chip { border:1px solid #5d505d; background:#292330; color:#e3d8e1; font-size:12px; font-weight:750; min-height:40px; padding:0 13px; }
.chip[aria-pressed=true] { background:#ff90bb; border-color:#ff90bb; color:#2a1c27; box-shadow:2px 2px 0 #100c12; }
.chip[aria-pressed=true]::before { color:#25171e; }
.custom-topic button { border-radius:13px; background:#3a3040; color:#ffa4c9; }
.goal-label { margin-top:18px; }
.start-area { padding-top:17px; }
.fineprint { color:#9f97a5; font-size:10px; }
.alert { border:1px solid #9e556c; background:#3b2330; color:#ffdfe8; }
.toast { background:#fff0f0; color:#221721; box-shadow:3px 4px 0 #000; font-size:12px; font-weight:700; }

/* Playful full-width sign-in sheet. Only one age declaration and one invite field. */
dialog { background:#221c2a; color:#f8f2f1; border:1px solid #625366; border-radius:22px; box-shadow:0 24px 90px #0009; }
dialog::backdrop { background:#0b0912dc; backdrop-filter:blur(5px); }
dialog p { color:#c2b9c7; }
.dialog-head h2 { color:#fff8f5; }
#editor-avatar { background:#f6cac5; border:2px solid #251b24; }
#avatar-dialog>p { color:#b8adb8; }
.editor-row { color:#eee2e8; }
.swatches>button[aria-pressed=true]:after { outline-color:#ff8db7; }
.onboarding-dialog { padding:17px; width:min(440px,calc(100vw - 18px)); max-height:calc(100dvh - 20px);
 border:2px solid #ff91ba; border-radius:28px; background:#211a28; color:#fff8f6;
 box-shadow:0 22px 75px #070409cc; overflow-y:auto; scrollbar-width:thin; }
.onboarding-dialog .dialog-head { margin-bottom:12px; min-height:33px; }
.onboard-brand { color:#fff2ec; font-size:24px; font-weight:1000; letter-spacing:-1.5px; line-height:1; }
.onboard-brand span { display:inline-block; font-size:21px; color:#ff85b3; transform:rotate(-15deg); }
.onboarding-dialog .icon-btn { width:36px; min-width:36px; height:36px; border:2px solid #7d6778;
 background:#302736; color:#fff6f4; font-size:23px; font-weight:800; }
.onboard-heading .eyebrow { color:#bdf7cf; font-size:9px; font-weight:900; letter-spacing:1.1px; }
.onboarding-dialog h2 { font-size:clamp(37px,10.4vw,48px); line-height:.88; letter-spacing:-2.2px; font-weight:1000; margin:10px 0 9px; }
.onboarding-dialog h2 em { font-style:normal; color:#ff8db7; }
.onboarding-dialog h3 { margin:0; text-align:center; font-size:25px; font-weight:900; letter-spacing:-.8px; }
.onboarding-dialog .onboard-subtitle { font-size:12px; color:#c7baca; line-height:1.35; margin:0; }
.onboard-status { margin-top:9px; border-radius:10px; padding:8px 11px; background:#364135; border:1px solid #bdf7cf55;
 color:#c2fbcf; font-size:12px; font-weight:700; }
.onboard-status[data-error="true"] { color:#ffe0e5; background:#50283a; border-color:#e78ea5; }
.onboard-spinner { color:#bdf7cf; font-size:11px; display:block; margin:7px 0; }
.onboard-pane { margin-top:11px; gap:7px; }
.onboard-hero { position:relative; min-height:0; height:175px; overflow:hidden; isolation:isolate;
 border-radius:20px 20px 34px 18px; border:3px solid #171019;
 background:radial-gradient(circle at 60% 130%,#f3bfd1 5%,transparent 55%),#f6d3c7; }
.onboard-hero::before { content:''; position:absolute; width:195px; height:195px; border:3px dashed #d9a4a6;
 border-radius:50%; left:50%; top:12px; transform:translateX(-50%) rotate(-21deg); z-index:-1; }
.onboard-hero-avatar { position:absolute; width:252px; height:252px; left:50%; bottom:-51px; transform:translateX(-50%) rotate(-4deg); }
.onboard-graphic-label { position:absolute; top:12px; left:13px; z-index:3; font-size:8px; letter-spacing:1.3px;
 color:#231825; font-weight:900; transform:rotate(-4deg); }
.onboard-graphic-spark { position:absolute; color:#ff4d9c; font-size:47px; right:12px; top:3px; z-index:2; transform:rotate(13deg); }
.onboard-graphic-bubble { position:absolute; top:66px; right:14px; z-index:4; width:42px; height:42px; display:grid;
 place-items:center; background:#fff9f5; color:#291e27; border:3px solid #281e29;
 border-radius:49% 50% 46% 36%; font-size:18px; font-weight:1000; transform:rotate(15deg); }
.onboarding-dialog .onboard-input-label { color:#d7cad8; font-size:11px; font-weight:800; margin-top:4px; }
.onboarding-dialog .onboard-input-label input { display:block; width:100%; min-height:46px; margin:5px 0 0; padding:9px 12px;
 border:1px solid #64566b; border-radius:12px; color:#fff9f7; background:#322b39; font-size:15px;
 font-variant-numeric:tabular-nums; }
.onboarding-dialog .onboard-input-label input:focus { border-color:#ff91b8; }
.onboard-check { display:flex; align-items:center; gap:11px; min-height:40px; width:100%; padding:0 6px;
 font-size:13px; font-weight:800; color:#f4eaf0; cursor:pointer; }
.onboard-check input { width:23px; height:23px; min-width:23px; margin:0; accent-color:#ff87b6; }
.onboard-check span { flex:1; }
.onboarding-dialog button.primary { min-height:53px; width:100%; font-size:16px; background:#ff90b9; border-color:#ff90b9;
 color:#241723; padding:10px 15px; display:flex; align-items:center; justify-content:space-between; }
.onboarding-dialog button.secondary { min-height:43px; background:#302a39; color:#fff5f3; border:1px solid #635766;
 font-weight:750; width:100%; font-size:13px; }
.onboarding-dialog .text-btn { min-height:35px; color:#c0b1c4; font-size:12px; }
.onboarding-dialog .fineprint { margin:1px 0 0; color:#9d90a5; font-size:10px!important; line-height:1.35; }
.onboard-preview { width:100%; aspect-ratio:1 / 1; min-height:210px; max-height:min(43dvh,340px); background:#0d0b0f;
 border:2px solid #ff8db7; border-radius:20px; }
.onboard-oval { border:2px dashed #ff8db7a6; }
.onboard-progress { background:#403547; height:6px; }
.onboard-progress>div { background:#ff8db7; }
.onboard-step { font-size:16px!important; font-weight:850; color:#fff7f3!important; }
.onboard-avatar { height:175px; width:100%; border-radius:22px; margin-bottom:4px;
 background:#f7d4c8; border:3px solid #201723; overflow:hidden; }
.onboard-avatar svg { width:245px; height:245px; max-width:none; transform:translateY(15px); }
#onboard-result .onboard-pane { align-items:center; }
#onboard-result h3 { margin:0 0 8px; }
#onboard-email p { font-size:12px; }

/* Context screens also belong to Murkeen's visual world. */
.search { min-height:calc(100svh - 85px); padding-top:28px; }
.search .eyebrow, .call .eyebrow, .recap .eyebrow { color:#bdf7cf; }
.search h1 { font-size:clamp(53px,14vw,70px); line-height:.92; letter-spacing:-3.7px; }
.search-orbit { margin-top:20px; background:radial-gradient(circle,#3a293f 5%,transparent 65%); }
.orbit-ring { border-color:#73566c; border-width:2px; border-style:dashed; }
.search-dot { background:#ff8db7; border-color:#17141e; }
.search>.secondary { margin-top:auto; }
.search-hint { color:#cbbcca; }
.call-meta h2 { color:#fff5f0; font-weight:900; font-size:30px; letter-spacing:-1px; }
.peer-card { background:#f4c4bb; border:3px solid #130e15; box-shadow:5px 5px 0 #ff87b2; border-radius:28px; }
.peer-art-bg, .peer-art-bg:after { border-color:#d59ba6; }
.connection-pill { background:#fff3f0; color:#30222b; font-weight:800; }
.connection-pill .tiny-dot.connected { background:#53ad79; }
.mode-pill { background:#271c2b; color:#fff1ed; font-weight:850; }
.self-mini { background:#e0b6e3; border-color:#fff8f0; box-shadow:1px 2px 0 #2a1624; }
.self-mini>span { color:#231925; }
.shared .eyebrow { color:#b6a8b7; }
.shared .chip { background:#382e3f; color:#f4e9f0; }
.conversation-prompt { color:#f4eaf1; }
.round-control { color:#fff4ee; }
.round-control[aria-pressed=true] { background:#633f55; }
.end-control { color:#ff91aa; }
.interruption { background:#3d2b37; }
.interruption p { color:#ffe9eb; }
.recap-icon { background:#ff91bd; color:#261c26; transform:rotate(-10deg); box-shadow:4px 4px 0 #08070b; }
.recap-panel { border-color:#564453; }
.recap-panel h2 { color:#f5eef3; }
.ratings>button { background:#332a39; color:#e7dce7; border:1px solid #5d4c5e; }
.ratings>button.selected { background:#ff8eb9; color:#281923; }
.recap .chip { min-height:39px; }

/* Mascot motion, restrained but expressive and fully local. */
.murkeen-avatar { overflow:visible; }
.avatar-head { transform-box:fill-box; transform-origin:center 69%; animation:mkBreathe 4.1s ease-in-out infinite; }
.avatar-antennae { transform-box:fill-box; transform-origin:center bottom; animation:mkWiggle 3.6s ease-in-out infinite; }
.avatar-eyes { transform-box:fill-box; transform-origin:center; animation:mkBlink 5.4s infinite; }
.avatar-mouth { transform-box:fill-box; transform-origin:50% 10%; transform:scaleY(var(--mouth-scale,.36)); transition:transform 95ms ease-out; }
@keyframes mkBreathe {0%,100%{transform:translateY(1px) rotate(-1.6deg)}50%{transform:translateY(-2px) rotate(1.2deg)}}
@keyframes mkWiggle {0%,100%{transform:rotate(0)}35%{transform:rotate(4deg)}68%{transform:rotate(-3deg)}}
@keyframes mkBlink {0%,37%,41%,100%{transform:scaleY(1)}39%{transform:scaleY(.12)}}
@media(max-width:380px) {
 .app { padding-left:16px; padding-right:16px; }
 .headline h1 { font-size:62px; }
 .avatar-preview { height:245px; }
 .hero-avatar { width:300px; height:300px; bottom:-50px; }
 .onboarding-dialog { padding:14px; }
 .onboard-hero { height:158px; }
 .onboard-hero-avatar { width:237px; height:237px; bottom:-47px; }
 .onboard-pane { gap:6px; margin-top:8px; }
 .onboarding-dialog h2 { font-size:39px; }
 .onboarding-dialog .fineprint { font-size:9px!important; }
 .build { display:none; }
}
@media(max-height:700px) {
 .onboarding-dialog { max-height:calc(100dvh - 10px); padding:13px; }
 .onboard-hero { height:145px; }
 .onboard-hero-avatar { height:220px; width:220px; bottom:-42px; }
 .onboarding-dialog h2 { font-size:37px; margin:6px 0; }
 .onboard-pane { gap:5px; margin-top:7px; }
 .onboarding-dialog .fineprint { display:none; }
 .onboard-check { min-height:34px; }
}
@media(prefers-reduced-motion:reduce) {
 .avatar-antennae,.avatar-head,.avatar-eyes { animation:none!important; }
 .primary { transition:none; }
}

/* Small phone header: the brand and login must never collide. */
@media(max-width:440px) {
  .topbar .build { display:none; }
  .topbar .account-pill { margin-left:auto; }
}