:root{
  font-family:ui-rounded,"Hiragino Sans","Yu Gothic UI",system-ui,sans-serif;
  color:#211a24;
  background:#fffbff;
  font-synthesis:none;
  --primary:#6f4db0;
  --on-primary:#fff;
  --primary-container:#ede2ff;
  --on-primary-container:#2c1754;
  --secondary:#b44e72;
  --secondary-container:#ffd9e5;
  --on-secondary-container:#4d1027;
  --surface:#fffbff;
  --surface-variant:#f2ecf4;
  --on-surface-variant:#4b454e;
  --outline:#7c747f;
  --error:#ba1a1a;
  --face:#ffffff;
  --accent:#f23b45;
  --dark:#3f302c;
  --blush:#e99ba5;
  --mouth:#3f302c;
  --tongue:#f1abb8;
  --mouth-open:18px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--surface);color:#211a24;overflow-x:hidden}
body{min-height:100dvh}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.55}
.app-shell{min-height:100dvh}
.screen{min-height:100dvh;background:var(--surface)}
.hidden{display:none!important}
.screen-content{width:min(100%,720px);margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 20px calc(106px + env(safe-area-inset-bottom))}
.onboarding-content,.settings-content,.about-content{padding-bottom:max(32px,env(safe-area-inset-bottom))}
h1,h2,h3,p{margin-top:0}
h1{font-size:2rem;line-height:1.15;margin-bottom:6px}
h2{font-size:1.02rem;margin-bottom:10px}
h3{font-size:.98rem;margin-bottom:8px}
p{line-height:1.58}
.lead{font-size:1.08rem;line-height:1.65}
.muted{color:var(--on-surface-variant)}
.small{font-size:.82rem}
.section-title{font-size:1.2rem;margin:8px 0 0}
.topbar,.subpage-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.topbar{margin-bottom:14px}
.topbar>div:first-child p,.subpage-header p{margin:0;color:var(--on-surface-variant);font-size:.86rem}
.topbar nav{display:flex;gap:2px;flex-shrink:0}
.text-button{border:0;background:transparent;color:var(--primary);font-weight:700;padding:10px 8px;border-radius:12px}
.text-button:active{background:rgba(111,77,176,.08)}
.inline-button{padding-inline-start:0}
.audience-card,.auto-reply-card,.card{
  width:100%;
  border-radius:28px;
  background:#fff;
  border:1px solid rgba(124,116,127,.16);
  box-shadow:0 3px 12px rgba(44,23,84,.035);
}
.auto-reply-card>div{display:grid;gap:2px}
.auto-reply-card strong{font-size:.88rem}
.auto-reply-card span{font-size:.78rem}
.audience-card{background:rgba(242,236,244,.55);padding:12px;margin-bottom:10px}
.audience-card p{margin:8px 2px 0;text-align:center}
.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.audience-segmented{grid-template-columns:1fr 1fr}
.segment-button,.primary-button,.outline-button{
  border-radius:18px;padding:13px 15px;font-weight:750;border:1px solid var(--primary);
  transition:transform .08s ease,background .15s ease;
}
.segment-button{background:#fff;color:var(--primary);padding:10px 8px;font-size:.87rem}
.segment-button.selected,.primary-button{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.primary-button,.outline-button{width:100%}
.outline-button{background:#fff;color:var(--primary)}
.primary-button:active,.outline-button:active,.segment-button:active{transform:scale(.992)}
.avatar-wrap{display:grid;place-items:center}
.avatar{
  width:min(94vw,430px);aspect-ratio:1;position:relative;display:grid;place-items:center;
  animation:avatarBob 3.8s ease-in-out infinite;
}
.emma-face{width:95%;height:95%;overflow:visible;filter:drop-shadow(0 10px 22px rgba(48,41,64,.08))}
.face-fill{fill:var(--face)}
.face-outline{fill:none;stroke:var(--dark);stroke-width:3;opacity:.18}
.head-accent{fill:none;stroke:var(--accent);stroke-width:13;stroke-linecap:round;opacity:.78}
.eye-white{fill:#fff;opacity:.97}
.eye-outline{fill:none;stroke:var(--dark);stroke-width:4}
.pupil{fill:var(--dark)}
.eye-shine{fill:#fff}
.cheek{fill:var(--blush);opacity:.46}
.idle-mouth,.error-mouth,.happy-eyes path{
  fill:none;stroke:var(--dark);stroke-width:7;stroke-linecap:round;
}
.error-mouth{display:none}
.happy-eyes{display:none}
.speaking-mouth{display:none;fill:var(--mouth)}
.tongue{display:none;fill:var(--tongue)}
.eye-group{transform-box:fill-box;transform-origin:center;animation:blink 4.7s infinite}
.state-understood .normal-eyes{display:none}
.state-understood .happy-eyes{display:block}
.state-error .idle-mouth{display:none}
.state-error .error-mouth{display:block}
.state-speaking .idle-mouth{display:none}
.state-speaking .speaking-mouth{display:block;transform-origin:160px 224px;transform:scaleY(calc(.45 + var(--mouth-scale,.3)))}
.state-speaking.mouth-wide .tongue{display:block}
.state-listening .eye-group,.state-endpoint .eye-group{animation:none;transform:scaleY(1.05)}
.listening-ring{
  position:absolute;inset:1.5%;border-radius:50%;border:5px solid transparent;pointer-events:none
}
.state-listening .listening-ring,.state-endpoint .listening-ring{
  border-color:color-mix(in srgb,var(--accent) 52%,transparent);
  animation:ringPulse 1s ease-in-out infinite alternate
}
.thinking-dots{position:absolute;right:8%;top:17%;display:none;gap:7px}
.thinking-dots span{width:11px;height:11px;border-radius:50%;background:var(--accent);animation:dots .9s infinite alternate}
.thinking-dots span:nth-child(2){animation-delay:.15s}
.thinking-dots span:nth-child(3){animation-delay:.3s}
.state-thinking .thinking-dots{display:flex}
.status-section{text-align:center;margin-top:-10px}
.status-row{display:flex;align-items:center;justify-content:center;gap:8px}
.status-chip{display:inline-block;padding:7px 12px;border-radius:10px;font-weight:750;font-size:.84rem;background:var(--surface-variant);color:var(--on-surface-variant)}
.status-listening,.status-endpoint{background:rgba(111,77,176,.1)}
.status-thinking,.status-understood{background:var(--primary-container);color:var(--on-primary-container)}
.status-speaking{background:var(--secondary-container);color:var(--on-secondary-container)}
.status-error{background:rgba(186,26,26,.12);color:var(--error)}
.status-section>p{margin:7px 0 0;font-size:.88rem}
.mini-spinner{width:20px;height:20px;border-radius:50%;border:2px solid rgba(111,77,176,.18);border-top-color:var(--primary);animation:spin .8s linear infinite}
.progress-wrap{max-width:430px;margin:14px auto 0}
.progress-track{height:9px;border-radius:99px;background:#ebe3ee;overflow:hidden}
.progress-bar{width:0;height:100%;background:var(--primary);transition:width .2s}
.progress-text{margin-top:6px;font-size:.76rem;color:var(--on-surface-variant)}
.conversation{display:grid;gap:10px;margin-top:14px}
.bubble{padding:14px;border-radius:28px;width:88%;border:0}
.parent-bubble{background:var(--surface-variant);justify-self:start}
.emma-bubble{background:var(--primary-container);color:var(--on-primary-container);justify-self:end}
.bubble-label{font-size:.72rem;font-weight:800;color:var(--on-surface-variant);margin-bottom:5px}
.bubble p{margin:0;font-size:1rem}
.auto-reply-card{
  background:rgba(242,236,244,.55);display:flex;align-items:center;justify-content:space-between;
  padding:15px 16px;margin-top:14px
}
.switch{display:inline-flex;align-items:center}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch>span{width:48px;height:28px;border-radius:20px;background:#b8afb9;position:relative;transition:.2s}
.switch>span::after{content:"";position:absolute;width:22px;height:22px;inset-inline-start:3px;top:3px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked+span{background:var(--primary)}
.switch input:checked+span::after{transform:translateX(20px)}
.bottom-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:20;background:rgba(255,251,255,.96);
  border-top:1px solid rgba(124,116,127,.16);box-shadow:0 -7px 18px rgba(33,26,36,.07);
  padding:12px max(20px,calc((100vw - 720px)/2 + 20px)) max(12px,env(safe-area-inset-bottom));
  display:grid;gap:8px;backdrop-filter:blur(12px)
}
.card{padding:16px;margin:14px 0}
.card p:last-child{margin-bottom:0}
.card label{display:grid;gap:7px;margin:11px 0;font-size:.88rem;font-weight:650}
.card input,.card textarea,.card select{
  width:100%;border-radius:14px;border:1px solid rgba(124,116,127,.35);background:#fff;color:#211a24;
  padding:12px 13px;outline:none
}
.card input:focus,.card textarea:focus,.card select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(111,77,176,.1)}
.field-title{font-weight:700;font-size:.88rem;margin:14px 0 8px}
.subpage-header{margin-bottom:16px}
.subpage-header>div{flex:1}
.subpage-header h1{font-size:1.65rem}
.simple-header{justify-content:flex-start}
.settings-content,.about-content,.onboarding-content{padding-top:max(22px,env(safe-area-inset-top))}
#settingsScreen{
  width:100%;
  max-width:100vw;
  overflow-x:hidden;
  overscroll-behavior-x:none;
  touch-action:pan-y;
}
#settingsScreen .settings-content{
  width:min(100%,720px);
  max-width:100vw;
  min-width:0;
  overflow-x:hidden;
}
#settingsScreen .subpage-header{
  width:100%;
  max-width:100%;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
}
#settingsScreen .subpage-header>div{
  min-width:0;
}
#settingsScreen .subpage-header h1,
#settingsScreen .subpage-header p,
#settingsScreen .card,
#settingsScreen .toggle-line>*,
#settingsScreen .runtime-info>*{
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}
#settingsScreen input,
#settingsScreen select,
#settingsScreen textarea,
#settingsScreen button{
  max-width:100%;
}
.color-preview{width:80px;height:80px;border-radius:50%;background:var(--face)}
.compact-button{padding:11px 13px;margin-top:5px}
.toggle-line{display:flex!important;grid-template-columns:none!important;align-items:center;justify-content:space-between;gap:14px}
.runtime-info{display:grid;gap:4px;font-size:.79rem;color:var(--on-surface-variant);margin-top:12px}
.reference-card p{font-size:.86rem;color:var(--on-surface-variant)}
.link-button{display:block;text-align:center;text-decoration:none;padding:11px}
.example-card{background:rgba(237,226,255,.5)}
.emphasis-card{background:rgba(255,217,229,.32)}
.debug-panel{display:none}
body.debug .debug-panel{display:block}
.modal-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100vw;
  max-width:100vw;
  padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));
  background:rgba(30,24,32,.38);
  backdrop-filter:blur(3px);
  overflow:hidden;
}
.modal-card{
  position:relative;
  box-sizing:border-box;
  width:calc(100vw - 32px);
  max-width:480px;
  min-width:0;
  max-height:min(78dvh,620px);
  overflow:auto;
  border-radius:28px;
  background:#fff;
  padding:28px 22px 22px;
  box-shadow:0 24px 70px rgba(33,26,36,.26);
  overflow-wrap:anywhere;
  word-break:break-word;
}
.modal-card h2{padding-inline-end:44px}
.modal-card .link-button{
  margin-top:16px;
  width:100%;
  max-width:100%;
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.modal-open{overflow:hidden}
.app-confirm-dialog{box-sizing:border-box;width:calc(100vw - 32px);max-width:480px;max-height:85dvh;overflow:auto;border:0;border-radius:28px;padding:28px 22px;background:#fff;color:var(--on-surface);box-shadow:0 24px 70px rgba(33,26,36,.26)}
.app-confirm-dialog::backdrop{background:rgba(30,24,32,.38);backdrop-filter:blur(3px)}
.app-confirm-dialog p{white-space:pre-line;overflow-wrap:anywhere;line-height:1.6}
.app-confirm-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}
.app-confirm-actions button{min-width:0;white-space:normal;overflow-wrap:anywhere}
.dialog-close{position:absolute;inset-inline-end:14px;top:14px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(124,116,127,.28);background:#fff;font-size:1.2rem}
@keyframes blink{0%,84%,90%,100%{transform:scaleY(1)}87%{transform:scaleY(.08)}}
@keyframes avatarBob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}
@keyframes ringPulse{from{transform:scale(.985);opacity:.65}to{transform:scale(1.02);opacity:.25}}
@keyframes dots{to{transform:translateY(-5px);opacity:.38}}
@keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:760px){
  .screen-content{padding-left:26px;padding-right:26px}
  .avatar{width:430px}
}
@media(max-width:430px){
  .modal-overlay{padding:12px}
  .modal-card{width:calc(100vw - 24px);max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);border-radius:24px;padding:24px 18px 18px}
      .screen-content{padding-left:16px;padding-right:16px}
  .topbar nav{gap:0}
  .text-button{font-size:.82rem;padding:9px 6px}
  .segmented{gap:5px}
  .segment-button{font-size:.78rem;padding:9px 5px}
}


/* --- Mitsukotoba app-first Web redesign --- */
body{
  background:
    radial-gradient(circle at 8% 2%, rgba(237,226,255,.78), transparent 34rem),
    radial-gradient(circle at 92% 18%, rgba(255,217,229,.55), transparent 30rem),
    var(--surface);
}
#onboardingScreen{
  background:
    radial-gradient(circle at 10% 0%, rgba(237,226,255,.88), transparent 30rem),
    radial-gradient(circle at 90% 28%, rgba(255,217,229,.62), transparent 28rem),
    linear-gradient(180deg,#fffaff 0%,#fff 55%,#fffafe 100%);
}
.onboarding-app{
  position:relative;
  width:min(100%,680px);
  padding-top:max(18px,env(safe-area-inset-top));
  padding-bottom:max(28px,env(safe-area-inset-bottom));
  overflow:hidden;
}
.onboarding-glow{
  position:absolute;
  width:230px;
  height:230px;
  border-radius:50%;
  filter:blur(1px);
  pointer-events:none;
  opacity:.55;
}
.glow-a{top:-130px;left:-120px;background:rgba(145,108,220,.12)}
.glow-b{top:260px;right:-160px;background:rgba(235,113,159,.1)}
.brand-row{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
}
.brand-lockup{display:flex;align-items:center;gap:12px;min-width:0}
.brand-name{font-weight:900;font-size:1.04rem;letter-spacing:.01em}
.brand-subtitle{margin-top:2px;color:var(--on-surface-variant);font-size:.72rem}
.brand-orbit{
  width:48px;height:48px;position:relative;flex:0 0 48px;
  border-radius:16px;background:rgba(255,255,255,.72);
  box-shadow:0 8px 28px rgba(76,47,126,.1);
  border:1px solid rgba(111,77,176,.11);
}
.orbit-dot{
  position:absolute;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-weight:900;font-size:.62rem;
  box-shadow:0 3px 10px rgba(48,41,64,.09);
}
.parent-dot{left:-4px;top:12px;background:#fff;color:#5a4f61;border:1px solid rgba(124,116,127,.18)}
.baby-dot{right:-4px;top:12px;background:#ffe3ec;color:#8b3151}
.ai-dot{left:11px;top:-3px;background:#eaddff;color:#54328c}
.quiet-button{
  border:1px solid rgba(111,77,176,.16);
  background:rgba(255,255,255,.65);
  color:var(--primary);
  padding:9px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:.78rem;
  backdrop-filter:blur(10px);
}
.welcome-hero{
  position:relative;
  z-index:1;
  border-radius:36px;
  padding:28px 22px 22px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.93),rgba(250,245,255,.9)),
    #fff;
  border:1px solid rgba(111,77,176,.1);
  box-shadow:0 22px 60px rgba(63,38,104,.10);
  overflow:hidden;
}
.welcome-hero::after{
  content:"";
  position:absolute;right:-70px;top:-80px;width:210px;height:210px;border-radius:50%;
  background:radial-gradient(circle,rgba(111,77,176,.11),rgba(111,77,176,0) 68%);
  pointer-events:none;
}
.hero-kicker{
  display:inline-flex;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(111,77,176,.08);
  color:var(--primary);
  font-weight:900;
  letter-spacing:.08em;
  font-size:.64rem;
  margin-bottom:14px;
}
.welcome-hero h1{
  position:relative;
  z-index:1;
  max-width:590px;
  font-size:clamp(2rem,7.5vw,3.15rem);
  line-height:1.08;
  letter-spacing:-.045em;
  margin:0 0 16px;
}
.welcome-hero h1 span{
  background:linear-gradient(90deg,#6f4db0 0%,#a2487b 72%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-copy{
  max-width:590px;
  margin:0;
  font-size:1rem;
  line-height:1.75;
  color:#4d4550;
}
.interaction-flow{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:center;
  gap:8px;
  margin:24px 0 18px;
}
.flow-item{
  min-width:0;
  padding:12px 7px;
  border-radius:22px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(124,116,127,.12);
  display:grid;
  justify-items:center;
  gap:8px;
  text-align:center;
}
.flow-icon{
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  font-weight:900;
  box-shadow:0 7px 20px rgba(48,41,64,.08);
}
.flow-icon.parent{background:#f7f2f7;color:#514854}
.flow-icon.ai{background:#e9ddff;color:#5b3796}
.flow-icon.baby{background:#ffe1eb;color:#913a5b}
.flow-text{display:grid;gap:2px;min-width:0}
.flow-text strong{font-size:.82rem}
.flow-text span{font-size:.66rem;color:var(--on-surface-variant)}
.flow-arrow{font-size:1.2rem;color:rgba(111,77,176,.48);font-weight:900}
.hero-example{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 10px;
  padding:11px 12px;
  border-radius:18px;
  background:linear-gradient(90deg,rgba(242,236,244,.72),rgba(237,226,255,.52));
  font-size:.78rem;
}
.example-parent{color:#5b535e}
.example-reply{color:#5a3690;font-weight:900}
.start-panel{
  position:relative;
  z-index:1;
  margin-top:16px;
  padding:16px;
  border-radius:30px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(124,116,127,.1);
  box-shadow:0 12px 34px rgba(48,41,64,.06);
  backdrop-filter:blur(12px);
}
.hero-start-button{
  min-height:66px;
  border:0;
  border-radius:22px;
  display:grid;
  place-items:center;
  gap:2px;
  padding:12px 16px;
  background:linear-gradient(135deg,#6f4db0 0%,#8a5ecb 56%,#a44f83 100%);
  box-shadow:0 13px 26px rgba(111,77,176,.24);
}
.button-main{font-size:1.03rem;font-weight:900}
.button-sub{font-size:.7rem;font-weight:650;opacity:.82}
.local-trust{
  margin-top:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:var(--on-surface-variant);
  font-size:.72rem;
  text-align:center;
}
.trust-dot{width:8px;height:8px;border-radius:50%;background:#36a269;box-shadow:0 0 0 4px rgba(54,162,105,.1)}
.setup-disclosure{
  position:relative;
  z-index:1;
  margin-top:12px;
  border-radius:26px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(124,116,127,.12);
  overflow:hidden;
  backdrop-filter:blur(10px);
}
.setup-disclosure summary{
  list-style:none;
  cursor:pointer;
  padding:15px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.setup-disclosure summary::-webkit-details-marker{display:none}
.setup-disclosure summary>span:first-child{display:grid;gap:2px}
.setup-disclosure summary strong{font-size:.88rem}
.setup-disclosure summary small{font-size:.7rem;color:var(--on-surface-variant)}
.summary-chevron{font-size:1.1rem;color:var(--primary);transition:transform .2s}
.setup-disclosure[open] .summary-chevron{transform:rotate(180deg)}
.setup-body{
  border-top:1px solid rgba(124,116,127,.1);
  padding:4px 16px 16px;
}
.setup-body label{display:grid;gap:7px;margin:13px 0;font-size:.86rem;font-weight:700}
.setup-body input{
  width:100%;border-radius:15px;border:1px solid rgba(124,116,127,.28);
  background:#fff;padding:12px 13px;outline:none;
}
.setup-body input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(111,77,176,.09)}
.onboarding-footnote{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:5px;
  margin-top:14px;
  color:var(--on-surface-variant);
  font-size:.68rem;
}

/* Home feels like an app stage, not a document. */
#homeScreen{
  background:
    radial-gradient(circle at 12% 0%,rgba(237,226,255,.62),transparent 27rem),
    linear-gradient(180deg,#fffaff,#fff);
}
#homeScreen .home-content{width:min(100%,680px)}
.app-topbar{margin-bottom:10px}
.home-brand{display:flex;align-items:center;gap:10px;min-width:0}
.home-brand h1{font-size:1.28rem;margin:0}
.home-brand p{font-size:.7rem!important}
.mini-brand-mark{position:relative;width:34px;height:30px;flex:0 0 34px}
.mini-brand-mark span{position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 7px rgba(48,41,64,.08)}
.mini-brand-mark span:nth-child(1){left:0;bottom:0;background:#f1edf2}
.mini-brand-mark span:nth-child(2){right:0;bottom:0;background:#ffdfe9}
.mini-brand-mark span:nth-child(3){left:8px;top:0;background:#e7d9ff}
.app-actions{display:flex!important;gap:6px!important}
.icon-text-button{
  border:1px solid rgba(124,116,127,.14);
  background:rgba(255,255,255,.78);
  color:var(--primary);
  width:46px;height:46px;border-radius:16px;
  display:grid;place-items:center;
  font-weight:900;
  font-size:1rem;
  padding:0;
}
.icon-text-button span{display:none}
#homeScreen .audience-card{
  border-radius:20px;
  background:rgba(255,255,255,.7);
  box-shadow:none;
}
#homeScreen .avatar-wrap{
  margin-top:10px;
  border-radius:40px;
  padding:4px 0 0;
  background:
    radial-gradient(circle at 50% 38%,rgba(255,255,255,.98),rgba(241,231,255,.66) 62%,rgba(255,225,236,.34) 100%);
  border:1px solid rgba(111,77,176,.08);
  box-shadow:0 22px 54px rgba(64,42,98,.09);
  overflow:hidden;
}
#homeScreen .avatar{width:min(88vw,390px)}
#homeScreen .status-section{margin-top:10px}
#homeScreen .auto-reply-card{
  border-radius:20px;
  background:rgba(255,255,255,.8);
  box-shadow:none;
}
#homeScreen .bottom-bar{
  background:rgba(255,253,255,.9);
  box-shadow:0 -10px 34px rgba(48,41,64,.08);
}
#homeScreen .bottom-bar .primary-button{
  border-radius:20px;
  min-height:64px;
  font-size:.98rem;
  box-shadow:0 8px 20px rgba(111,77,176,.14);
}

/* The long explanation is deliberately an article-like secondary screen. */
#aboutScreen .about-content{width:min(100%,760px)}
#aboutScreen .about-content>h1{font-size:2rem}
#aboutScreen .lead{
  padding:17px 18px;
  border-radius:22px;
  background:linear-gradient(135deg,rgba(237,226,255,.7),rgba(255,217,229,.38));
  border:1px solid rgba(111,77,176,.09);
}
#aboutScreen .card{
  border-radius:24px;
  box-shadow:none;
  background:rgba(255,255,255,.82);
}
#aboutScreen .reference-card{
  border-inline-start:4px solid rgba(111,77,176,.45);
}

@media(max-width:560px){
  .welcome-hero{padding:24px 17px 18px;border-radius:30px}
  .interaction-flow{
    grid-template-columns:1fr 1fr 1fr;
    gap:7px;
  }
  .flow-arrow{display:none}
  .flow-item{padding:10px 5px;border-radius:18px}
  .flow-icon{width:40px;height:40px}
  .flow-character{width:50px;height:50px;background-size:156px 156px}
  .parent-character{background-position:-25px -30px}
  .ai-character{background-position:-79px -30px}
  .baby-character{background-position:-53px -57px}
  .flow-text strong{font-size:.75rem}
  .flow-text span{font-size:.6rem}
  .hero-copy{font-size:.92rem}
  .brand-subtitle{display:none}
}

.ai-name-badge{
  margin:12px auto 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:84px;
  padding:7px 14px;
  border-radius:999px;
  background:rgba(237,226,255,.82);
  color:var(--on-primary-container);
  font-size:.86rem;
  font-weight:900;
  box-shadow:0 7px 18px rgba(73,48,108,.08);
  border:1px solid rgba(111,77,176,.10);
}
.flow-icon.ai{font-size:.72rem;letter-spacing:-.02em}

.brand-logo-img{
  width:50px;
  height:50px;
  border-radius:16px;
  object-fit:cover;
  flex:0 0 50px;
  box-shadow:0 8px 24px rgba(76,47,126,.10);
}
.home-logo-img{
  width:36px;
  height:36px;
  border-radius:12px;
  object-fit:cover;
  flex:0 0 36px;
  box-shadow:0 4px 12px rgba(76,47,126,.08);
}
.about-logo-wrap{
  display:flex;
  justify-content:center;
  margin:4px 0 12px;
}
.about-logo{
  width:112px;
  height:112px;
  border-radius:28px;
  object-fit:cover;
  box-shadow:0 12px 30px rgba(76,47,126,.10);
}


/* 2026-09-27 onboarding clarity + citation polish */
.research-cta{
  position:relative;
  z-index:1;
  width:100%;
  margin:0 0 14px;
  padding-block:14px;padding-inline:16px 48px;
  border:1px solid rgba(111,77,176,.18);
  border-radius:22px;
  background:linear-gradient(135deg,rgba(111,77,176,.12),rgba(255,217,229,.60));
  color:#4e3479;
  text-align:start;
  box-shadow:0 10px 28px rgba(76,47,126,.10);
  cursor:pointer;
}
.research-cta-kicker{
  display:block;
  margin-bottom:2px;
  color:#8b5bb5;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.06em;
}
.research-cta-title{
  display:block;
  font-size:.94rem;
  font-weight:900;
  line-height:1.35;
}
.research-cta-arrow{
  position:absolute;
  inset-inline-end:17px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.76);
  font-weight:900;
}
.research-cta:active{transform:translateY(1px)}

.flow-character{
  width:58px;
  height:58px;
  border-radius:50%;
  background-image:url('./icons/mitsukotoba.png?v=20260927-logo2');
  background-repeat:no-repeat;
  background-size:180px 180px;
  box-shadow:0 7px 20px rgba(48,41,64,.10);
  border:3px solid rgba(255,255,255,.92);
}
.parent-character{
  background-color:#f7f2f7;
  background-position:-29px -34px;
}
.ai-character{
  background-color:#e9ddff;
  background-position:-91px -34px;
}
.baby-character{
  background-color:#ffe1eb;
  background-position:-61px -66px;
}
.ai-intro{
  margin:-4px 0 16px;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(237,226,255,.48);
  border:1px solid rgba(111,77,176,.09);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
  font-size:.76rem;
  text-align:center;
}
.ai-intro-label{
  padding:4px 8px;
  border-radius:999px;
  background:rgba(111,77,176,.10);
  color:#5b3796;
  font-weight:900;
}
.ai-intro-copy{color:#4e4653}
.citation-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:24px;
  margin-left:3px;
  padding:0 6px;
  border-radius:999px;
  background:rgba(111,77,176,.10);
  color:#5b3796;
  font-size:.74rem;
  font-weight:900;
  text-decoration:none;
  vertical-align:baseline;
}
.citation-number{
  color:#6f4db0;
  font-weight:900;
}
.guideline-card{
  border-left-color:rgba(54,162,105,.58)!important;
}
.reference-card:target{
  outline:3px solid rgba(111,77,176,.20);
  outline-offset:3px;
}

/* Inline artwork: direct images, no external background asset dependency */
.flow-character-img{
  width:58px;
  height:58px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  box-shadow:0 7px 20px rgba(48,41,64,.10);
  border:3px solid rgba(255,255,255,.92);
}
@media(max-width:560px){
  .flow-character-img{width:50px;height:50px}
}


/* Mitsukotoba unified brand refresh — 2026-09-27 */
.brand-row-centered{
  justify-content:center;
  margin-bottom:8px;
}
.mitsukotoba-brand-mark{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
}
.brand-characters{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:116px;
  margin-bottom:-8px;
}
.brand-characters img{
  width:112px;
  height:112px;
  object-fit:contain;
  display:block;
  margin:0 -15px;
  filter:drop-shadow(0 7px 14px rgba(91,65,105,.08));
}
.brand-characters img:nth-child(2){
  width:106px;
  height:106px;
  z-index:2;
}
.brand-characters img:nth-child(3){z-index:1}
.brand-wordmark{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(2.85rem,9vw,4.4rem);
  font-weight:950;
  line-height:.92;
  letter-spacing:-.12em;
  padding-right:.12em;
  text-shadow:0 2px 0 rgba(255,255,255,.72);
}
.brand-wordmark.brand-wordmark-localized{
  font-size:clamp(1.65rem,7.8vw,2.9rem);
  font-weight:850;
  letter-spacing:-.025em;
  line-height:1.16;
  padding-right:0;
  color:var(--primary,#765548);
  max-width:100%;
  text-align:center;
  overflow-wrap:anywhere;
}
.brand-mi{color:#f06e72}
.brand-tsu{color:#8e6552}
.brand-ko{color:#f3b943}
.brand-to{color:#62c7a0}
.brand-ba{color:#765548}
.flow-character-img{
  width:72px;
  height:72px;
  object-fit:contain;
}
.ai-intro{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.ai-intro-character{
  width:54px;
  height:54px;
  object-fit:contain;
  flex:0 0 auto;
}
@media (max-width:520px){
  .brand-characters{min-height:96px;margin-bottom:-5px}
  .brand-characters img{width:92px;height:92px;margin:0 -12px}
  .brand-characters img:nth-child(2){width:88px;height:88px}
  .brand-wordmark{font-size:clamp(2.5rem,15vw,3.7rem)}
  .flow-character-img{width:64px;height:64px}
  .ai-intro-character{width:48px;height:48px}
}


/* --- Android parity: face-frame avatar + coach-mark tutorial (2026-09-29) --- */
.emma-face-frame{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 12px 26px rgba(48,41,64,.10));
  user-select:none;
  -webkit-user-drag:none;
}
.avatar{
  width:min(96vw,460px);
  aspect-ratio:1.05;
  overflow:visible;
}
.avatar .listening-ring{
  inset:3%;
  border-radius:50%;
}
.tutorial-overlay{
  position:fixed;
  inset:0;
  z-index:1500;
  pointer-events:none;
}
.tutorial-spotlight{
  position:fixed;
  z-index:1501;
  border:4px solid rgba(182,124,255,.95);
  border-radius:26px;
  box-shadow:0 0 0 9999px rgba(28,22,32,.72),0 0 28px rgba(182,124,255,.75);
  animation:tutorialPulse .7s ease-in-out infinite alternate;
  pointer-events:none;
  transition:left .22s ease,top .22s ease,width .22s ease,height .22s ease;
}
.tutorial-card{
  position:fixed;
  z-index:1502;
  top:max(72px,calc(env(safe-area-inset-top) + 58px));
  left:50%;
  transform:translateX(-50%);
  width:min(calc(100vw - 32px),480px);
  box-sizing:border-box;
  padding:18px;
  border-radius:24px;
  background:rgba(255,255,255,.98);
  box-shadow:0 18px 60px rgba(20,15,24,.32);
  pointer-events:auto;
}
.tutorial-card h2{margin:4px 0 8px;font-size:1.15rem}
.tutorial-card p{margin:0;color:var(--on-surface-variant);line-height:1.6}
.tutorial-step-label{font-size:.76rem;font-weight:800;color:var(--primary)}
.tutorial-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:14px}
.tutorial-actions .primary-button{width:auto;min-width:112px}
.tutorial-hint{font-size:.82rem;font-weight:800;color:var(--primary)}
@keyframes tutorialPulse{
  from{border-color:rgba(182,124,255,.58);box-shadow:0 0 0 9999px rgba(28,22,32,.72),0 0 12px rgba(182,124,255,.38)}
  to{border-color:rgba(182,124,255,1);box-shadow:0 0 0 9999px rgba(28,22,32,.72),0 0 34px rgba(182,124,255,.85)}
}
@media(max-width:520px){
  .tutorial-card{
    top:max(62px,calc(env(safe-area-inset-top) + 48px));
    width:calc(100vw - 24px);
    padding:16px;
  }
  .avatar{width:min(98vw,440px)}
}

/* --- Settings parity with Android (2026-09-29) --- */
.settings-disclosure{padding:0;overflow:hidden}
.settings-disclosure>summary{
  list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:16px;cursor:pointer
}
.settings-disclosure>summary::-webkit-details-marker{display:none}
.settings-disclosure>summary>span:first-child{display:grid;gap:3px}
.settings-disclosure>summary strong{font-size:1.02rem}
.settings-disclosure>summary small{font-size:.78rem;color:var(--on-surface-variant);font-weight:500}
.settings-disclosure[open] .summary-chevron{transform:rotate(180deg)}
.settings-disclosure-body{padding:0 16px 16px}
.settings-divider{border:0;border-top:1px solid rgba(124,116,127,.16);margin:18px 0}
.developer-tools-card{
  margin-top:12px;padding:14px;border-radius:20px;
  background:rgba(242,236,244,.62);border:1px solid rgba(124,116,127,.14)
}
.developer-tools-card .link-button{margin-top:8px}


/* Web parity polish r3 — 2026-09-29 */
.lite-compact-setting{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px 14px;margin:4px 0 10px;border:1px solid rgba(124,116,127,.16);
  border-radius:18px;background:rgba(255,255,255,.62)
}
.lite-compact-setting>div{display:grid;gap:2px;min-width:0}
.lite-compact-setting small{color:var(--on-surface-variant);line-height:1.4}
.compact-toggle{flex:0 0 auto;margin:0!important}
.developer-test-panel{display:grid;gap:8px;margin:12px 0}
.developer-test-panel label{display:grid;gap:7px}
.developer-test-panel textarea{
  width:100%;box-sizing:border-box;border-radius:14px;border:1px solid rgba(124,116,127,.35);
  background:#fff;padding:12px 13px
}
.tts-diagnostics{
  display:grid;gap:4px;padding:12px;margin:10px 0;border-radius:14px;
  background:rgba(124,116,127,.08);font-size:.78rem;color:var(--on-surface-variant)
}
.tts-diagnostics strong{color:var(--on-surface)}
.tutorial-card{top:12px}


/* Mobile regression fixes — 20260929-mobile-fixes-r5 */
.lite-compact-setting{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  align-items:stretch!important;
  gap:10px!important;
  padding:14px 16px!important;
}
.lite-compact-setting>div{
  width:100%;
  min-width:0;
}
.lite-compact-setting .compact-toggle{
  width:100%!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  flex:0 0 auto!important;
  padding-top:8px;
  border-top:1px solid rgba(124,116,127,.12);
}
.lite-compact-setting .compact-toggle>span:first-child{
  min-width:0;
  flex:1 1 auto;
}
.lite-compact-setting .compact-toggle strong{
  font-size:.9rem;
  line-height:1.35;
}
.lite-compact-setting .switch{
  flex:0 0 auto!important;
}
#homeScreen .home-content{
  padding-bottom:calc(300px + env(safe-area-inset-bottom))!important;
}
.tutorial-spotlight{
  box-sizing:border-box!important;
}
@media(max-width:560px){
  #homeScreen .home-content{
    padding-bottom:calc(330px + env(safe-area-inset-bottom))!important;
  }
}


/* 2026-09-30: onboarding/image/tutorial corrections */
.lite-compact-setting{
  gap:6px!important;
  padding:9px 12px!important;
  border-radius:16px!important;
}
.lite-compact-setting>div{gap:0!important}
.lite-compact-setting>div>strong{font-size:.92rem}
.lite-compact-setting small{
  font-size:.68rem!important;
  line-height:1.25!important;
}
.lite-compact-setting .compact-toggle{
  min-height:38px!important;
  padding:3px 0 0!important;
  gap:8px!important;
}
.lite-compact-setting .compact-toggle>span:first-child{
  font-size:.82rem!important;
  line-height:1.2!important;
}
.lite-compact-setting .compact-toggle .switch{
  transform:scale(.86);
  transform-origin:right center;
}
.onboarding-ai-name-help{
  margin:-6px 0 10px;
  line-height:1.35;
}
.about-characters{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:112px;
  margin:4px auto 18px;
}
.about-characters img{
  width:104px;
  height:104px;
  object-fit:contain;
  display:block;
  margin:0 -13px;
  filter:drop-shadow(0 7px 14px rgba(91,65,105,.08));
}
.about-characters img:nth-child(2){
  width:98px;
  height:98px;
  z-index:2;
}
@media(max-width:520px){
  .about-characters{min-height:92px;margin-bottom:14px}
  .about-characters img{width:86px;height:86px;margin:0 -11px}
  .about-characters img:nth-child(2){width:82px;height:82px}
}


/* AI name setup disclosure */
.ai-setup-disclosure{margin-top:10px}

/* Complete inline expression frames inherit the selected appearance palette. */
.emma-face-frame > svg{width:100%;height:100%;display:block;}

/* Play/history parity with Android: small left shortcut + large primary action on one row. */
#homeScreen .bottom-bar{
  grid-template-columns:minmax(72px,92px) minmax(0,1fr);
  align-items:stretch;
}
#homeScreen .bottom-bar #playButton{grid-column:1;grid-row:1;}
#homeScreen .bottom-bar #mainButton,
#homeScreen .bottom-bar #stopButton{grid-column:2;grid-row:1;}
#homeScreen .bottom-bar #manualReplyButton,
#homeScreen .bottom-bar #enableAudioButton{grid-column:1 / -1;}
.play-shortcut{
  min-width:72px;min-height:64px;border-radius:20px;
  border:1px solid var(--primary);background:#fff;color:var(--on-surface);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:8px;font:inherit;font-size:.78rem;font-weight:800;
}
#homeScreen .screen-content { padding-bottom:250px; }
.feature-dialog{
  width:min(100%,760px);height:100dvh;max-height:100dvh;margin:auto;border:0;
  padding:20px;background:#fff;color:var(--on-surface);overflow:auto;
}
.feature-dialog header{display:flex;align-items:center;flex-wrap:wrap;gap:12px;}
#featureBody{display:flex;flex-direction:column;gap:12px;min-height:80%;}
#featureBody .card button{margin:4px;min-height:48px;}
.play-topic-change{align-self:flex-start;}
.play-sentence-toolbar{
  display:flex;align-items:center;justify-content:flex-end;gap:8px;
  width:100%;padding:0 2px;
}
.play-sentence-prefix{font-size:.82rem;color:var(--on-surface-variant);}
.play-sentence-toggle{
  display:inline-flex;align-items:center;gap:6px;
}
.play-sentence-option{
  min-height:40px;padding:8px 16px;border-radius:18px;
  border:1px solid color-mix(in srgb,var(--on-surface-variant) 35%,transparent);
  background:#fff;color:var(--on-surface);font:inherit;font-weight:800;
}
.play-sentence-option.selected{
  border-color:transparent;
  background:color-mix(in srgb,var(--primary) 14%,white);
  color:var(--primary);
}
.play-tap{
  flex:1;min-height:65dvh;border:2px solid color-mix(in srgb,var(--primary) 55%,white);
  border-radius:32px;background:#fff;color:var(--on-surface);font:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;padding:40px 24px 28px;overflow:visible;
  transition:background-color .24s ease,border-color .24s ease,box-shadow .24s ease;
}
.play-tap:disabled{opacity:.82;}
.play-tap.is-speaking{
  opacity:1;
  background:color-mix(in srgb,var(--primary) 8%,white);
  border-color:color-mix(in srgb,var(--primary) 62%,white);
  box-shadow:0 14px 34px color-mix(in srgb,var(--primary) 10%,transparent);
}
.play-avatar{width:min(48vw,220px);height:auto;max-height:38dvh;overflow:visible;}
.play-topic-label{font-weight:900;color:var(--primary);}
.play-action-label{font-size:1.45rem;font-weight:850;text-align:center;}
.play-english-text{
  display:block;width:100%;max-width:34rem;
  text-align:center;font-size:1.35rem;font-weight:650;line-height:1.45;
  overflow-wrap:anywhere;
}
.play-help{text-align:center;}
/* Compact conversation history: no action row beneath each entry. */
.history-description{font-size:.83rem;color:var(--on-surface-variant);margin:0;}
.history-toolbar{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px;}
.history-selected-count{margin-inline-end:auto;font-size:.86rem;color:var(--on-surface-variant);font-weight:700;}
#featureBody .history-toolbar button{min-height:40px;padding:7px 11px;}
#featureBody .history-card{padding:10px 14px;margin:0;border-radius:18px;box-shadow:none;}
.history-card-header{display:flex;align-items:center;justify-content:space-between;min-height:42px;}
.history-card .history-time{margin:0;}
#featureBody .history-card .history-replay{
  display:grid;place-items:center;margin:0;min-height:42px;width:42px;padding:0;
  flex:0 0 42px;border:1px solid rgba(111,77,176,.25);
  border-radius:50%;background:var(--primary-container);color:var(--primary);
  font-size:1.15rem;line-height:1;
}
#featureBody .history-card .history-replay:focus-visible{outline:3px solid var(--primary);outline-offset:2px;}
.history-card .history-japanese,.history-card .history-english{margin:0 0 7px;line-height:1.45;overflow-wrap:anywhere;}
.history-card .history-english{font-size:1.05rem;font-weight:750;margin-bottom:0;}
.history-card .history-label{margin-bottom:2px;}
#featureBody .history-card .history-select{width:22px;height:22px;margin:10px;accent-color:var(--primary);box-shadow:none;}
.history-selectable{cursor:pointer;}
.history-selectable:focus-within{border-color:var(--primary);}
.history-date-heading{margin:18px 2px 4px;font-size:1.05rem;}
.history-time{display:block;font-size:.8rem;font-weight:800;color:var(--on-surface-variant);margin-bottom:8px;}
.history-label{display:block;font-size:.7rem;font-weight:800;color:var(--on-surface-variant);margin-bottom:2px;}
@media(max-width:420px){
  #homeScreen .bottom-bar{grid-template-columns:76px minmax(0,1fr);gap:8px;}
  .play-shortcut{min-width:0;padding:6px 4px;font-size:.72rem;}
}
@media(max-height:560px){.bottom-bar{position:static;}#homeScreen .screen-content{padding-bottom:24px;}.play-tap{min-height:420px;}}

.semantic-actions {display:flex;gap:.5rem;flex-wrap:wrap;margin:.75rem 0;}
.semantic-result {overflow-wrap:anywhere;}
.semantic-result p {margin:.5rem 0;}
#semanticPanel progress {width:100%;}
#semanticPanel details {margin-top:1rem;}
#semanticPanel select,#semanticPanel textarea {width:100%;}
#semanticPanel .switch {position:relative;flex-shrink:0;}
#semanticPanel .switch input {width:100%;height:100%;inset:0;}

.semantic-test-page .screen-content { width:100%;max-width:720px;min-width:0; }
.semantic-test-page .subpage-header { align-items:flex-start;flex-direction:column; }
.semantic-test-page .subpage-header h1 { font-size:1.5rem; }
.semantic-test-page p { overflow-wrap:anywhere; }

/* Keep switch hitboxes inside their labels and preserve text/IME interaction. */
.switch {position:relative;}
.switch input {inset:0;width:100%;height:100%;}
#semanticPanel textarea {position:relative;z-index:1;pointer-events:auto;user-select:text;-webkit-user-select:text;touch-action:manipulation;min-height:110px;resize:vertical;}
.semantic-compact-setting small {font-size:.74rem;}


/* Emma-first conversation: preserve the existing full-size animated avatar.
   Parents can glance at all three English sentences without chat bubbles. */
#homeScreen .conversation{display:block;margin-top:8px}
#homeScreen .conversation.hidden{display:none!important}
#homeScreen .emma-bubble{
  justify-self:stretch;width:100%;border-radius:18px;padding:10px 12px;
  background:rgba(255,255,255,.83);border:1px solid rgba(111,77,176,.12);
  box-shadow:none;color:var(--on-surface)
}
#homeScreen .reply-topic{
  font-size:.7rem;line-height:1.3;font-weight:700;color:var(--primary);
  margin-bottom:5px;text-align:start
}
#homeScreen .emma-bubble .reply-english{
  font-size:.88rem;line-height:1.38;font-weight:650;overflow-wrap:anywhere
}
#homeScreen .emma-bubble .reply-japanese{
  margin-top:5px;font-size:.72rem;line-height:1.35;
  color:var(--on-surface-variant);overflow-wrap:anywhere
}

/* The topic sits at the top-left of Emma's existing full-size face panel. */
#homeScreen .avatar-wrap{position:relative}
#homeScreen .avatar-wrap>.reply-topic{
  position:absolute;inset-inline-start:12px;top:12px;z-index:2;
  border-radius:999px;padding:5px 9px;
  background:rgba(255,255,255,.90);
  border:1px solid rgba(111,77,176,.12);
  box-shadow:0 3px 9px rgba(30,12,58,.04);
  font-size:.71rem;line-height:1.2;font-weight:700;color:var(--primary)
}


/* Compact Emma-first UI: one status badge in the former "Emma" slot.
   Preserve the existing avatar dimensions and animation. */
#homeScreen .avatar-wrap .avatar-status{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin:2px auto 12px;max-width:calc(100% - 24px);
  min-height:31px;z-index:3
}
#homeScreen .avatar-status .status-chip{
  padding:7px 15px;border-radius:999px;font-size:.81rem;
  line-height:1.3;text-align:center;max-width:100%;overflow-wrap:anywhere
}
#homeScreen .avatar-status .mini-spinner{width:16px;height:16px;flex:none}
#homeScreen .status-section{margin:0}
#homeScreen .status-section #statusDetail{margin:6px 0 0;font-size:.78rem;line-height:1.35}
#homeScreen .conversation{margin-top:9px}
#homeScreen .emma-bubble{padding:10px 12px}
#homeScreen .auto-reply-card{margin-top:10px;padding:10px 14px}
/* Optional manual endpoint is a secondary action, not the dominant purple CTA. */
#homeScreen .bottom-bar #manualReplyButton{
  min-height:40px;border-radius:13px;padding:8px 12px;
  font-size:.83rem;font-weight:700;box-shadow:none;
  color:var(--primary);background:rgba(111,77,176,.055);
  border:1px solid rgba(111,77,176,.22)
}


/* Emma-first warm conversation ornamentation. Keep the face full-size and
   decorate the ONE supporting reply panel rather than adding stacked cards. */
#homeScreen .avatar-wrap>.reply-topic {
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px 7px 10px;
  border:1.5px solid rgba(144,96,187,.34);
  border-radius:999px;
  background:linear-gradient(115deg,rgba(255,249,255,.98),rgba(238,224,255,.96));
  color:#7043a2;
  font-weight:800;font-size:.73rem;
  box-shadow:0 4px 13px rgba(112,67,162,.10);
}
#homeScreen .emma-bubble{
  position:relative;overflow:hidden;
  border:1.5px solid rgba(165,123,204,.3);
  border-radius:22px;
  background:linear-gradient(136deg,#fffefd 6%,#fff7fc 63%,#f8f2ff 100%);
  box-shadow:0 5px 16px rgba(130,91,174,.09),inset 0 1px 0 rgba(255,255,255,.95);
  padding:12px 15px 11px;
}
#homeScreen .emma-bubble .reply-english{
  position:relative;z-index:1;
  padding-right:12px;font-size:.90rem;line-height:1.43;
  font-weight:670;color:#44304f;letter-spacing:.005em;
}
#homeScreen .emma-bubble .reply-japanese{
  margin-top:8px;padding-top:7px;
  border-top:1px dashed rgba(172,128,198,.30);
  color:#826d91;font-size:.73rem;line-height:1.4;
}
#settingsScreen .auto-respond-setting{display:flex;align-items:center;justify-content:space-between;gap:12px}
#settingsScreen .auto-respond-setting>span:first-child{display:grid;gap:4px;flex:1;min-width:0}
#settingsScreen .auto-respond-setting small{font-weight:400;color:var(--on-surface-variant);font-size:.78rem}
#settingsScreen .auto-respond-setting .switch{flex:none}


/* Eight-point compact conversation refresh. No gem/diamond motifs. */
#homeScreen .avatar-wrap>.reply-topic::before,
#homeScreen .emma-bubble::before{content:none!important;display:none!important}
#homeScreen .avatar-wrap>.reply-topic{padding:7px 13px;gap:0}
#homeScreen .emma-bubble .reply-english{padding-right:0}

/* Top-right play entry takes the former '?' slot. */
#homeScreen .app-actions .play-top-button{
  width:auto;min-width:91px;height:46px;padding:0 9px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:16px;gap:1px;white-space:nowrap
}
#homeScreen .app-actions .play-top-button span{display:block;font-size:.67rem;font-weight:750;line-height:1.16}
#homeScreen .app-actions .play-top-button span:first-child{font-size:1.05rem}
#homeScreen .home-brand{min-width:0}
#homeScreen .home-brand h1{font-size:clamp(1.05rem,4vw,1.28rem)}

/* One large invitation while Emma is asleep; speech action dominates when running. */
#homeScreen .bottom-bar{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(99px,27%);
  gap:9px;align-items:stretch;
}
#homeScreen .bottom-bar #mainButton{
  grid-column:1 / -1;grid-row:1;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  min-height:94px;padding:13px 16px;border-radius:23px;
  background:var(--primary);color:var(--on-primary);
  box-shadow:0 10px 25px rgba(111,77,176,.25)
}
#homeScreen .bottom-bar #mainButton .start-cta-hint{
  display:block;font-size:.75rem;font-weight:500;line-height:1.4;margin-top:5px;opacity:.92
}
#homeScreen .bottom-bar #mainButton strong{font-size:1.18rem;line-height:1.3}
#homeScreen .bottom-bar #manualReplyButton{
  grid-column:1;grid-row:1;
  min-width:0;min-height:66px;margin:0;border:0;border-radius:19px;
  padding:11px 8px;
  font-size:1rem;font-weight:800;
  background:var(--primary);color:var(--on-primary);
  box-shadow:0 8px 20px rgba(111,77,176,.22)
}
#homeScreen .bottom-bar #stopButton{
  grid-column:2;grid-row:1;
  min-height:66px;padding:9px 5px;border-radius:18px;
  background:rgba(255,255,255,.94);
  color:var(--primary);font-size:.78rem;font-weight:700;line-height:1.32
}
#homeScreen .bottom-bar #enableAudioButton{grid-column:1 / -1;grid-row:2}
#homeScreen .screen-content.home-content{
  padding-bottom:calc(132px + env(safe-area-inset-bottom))!important;
}
#homeScreen[data-session="active"] .screen-content.home-content{
  padding-bottom:calc(103px + env(safe-area-inset-bottom))!important;
}
/* Use the same switch for every binary setting; keep a visible keyboard focus ring. */
#settingsScreen .switch input:focus-visible+span{
  outline:3px solid var(--primary);outline-offset:3px
}

/* Optional audio-owned Visual Cue overlay; retain the established avatar footprint. */
.visual-cue-host[hidden]{display:none!important}
.visual-cue-host{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.visual-cue-image{display:block;width:100%;height:100%;max-width:320px;max-height:320px;object-fit:contain}
.avatar.has-visual-cue{animation:none!important}
.avatar.has-visual-cue>.emma-face-frame,.avatar.has-visual-cue>.listening-ring,.avatar.has-visual-cue>.thinking-dots{visibility:hidden}





.avatar.has-emma-background{isolation:isolate}
.visual-cue-host[data-layer="background"]{z-index:-1}
.visual-cue-background{display:block;width:100%;height:100%;pointer-events:none}
/* Language selection is available before setup, on Home and in Settings. */
.language-picker{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:12px 0;font-size:1rem;font-weight:600;}
.language-picker select{max-width:100%;min-width:180px;min-height:44px;padding:8px 12px;border:1px solid #b5afba;border-radius:12px;background:var(--surface,#fff);color:var(--text,#242028);font:inherit;font-weight:400;}
#settingsScreen .choice-setting{display:grid;gap:9px;margin:13px 0;min-width:0}
#settingsScreen .choice-setting-title{font-size:1rem;font-weight:700}
#settingsScreen select.choice-select-enhanced{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;clip-path:inset(50%)!important;pointer-events:none!important;padding:0!important;margin:0!important}
#settingsScreen .settings-choice-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,138px),1fr));gap:9px;margin:6px 0 10px;min-width:0}
#settingsScreen .settings-choice-button{min-height:48px;padding:10px 12px;border:2px solid var(--outline,#b5afba);border-radius:14px;background:var(--surface,#fff);color:var(--on-surface,#242028);font-size:1rem;line-height:1.4;font-weight:650;overflow-wrap:anywhere;cursor:pointer;text-align:center;touch-action:manipulation}
#settingsScreen .settings-choice-button.selected{background:var(--primary-container,#eaddff);border-color:var(--primary,#6f4db0);color:var(--on-primary-container,#251340);box-shadow:inset 0 0 0 1px var(--primary,#6f4db0)}
#settingsScreen .settings-choice-button:focus-visible{outline:3px solid var(--primary,#6f4db0);outline-offset:2px}
#settingsScreen .settings-choice-button:disabled{opacity:.55;cursor:default}
#settingsScreen .language-picker{display:block}
#settingsScreen .language-picker-title{display:block;font-size:1rem;font-weight:700}
#settingsScreen .language-picker .settings-choice-buttons{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
#settingsScreen .settings-language-buttons{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
#settingsScreen .settings-language-buttons>.settings-choice-button[data-value="auto"]{width:100%;min-height:48px}
#settingsScreen .settings-language-current{display:flex;align-items:center;justify-content:center;margin:0;min-height:54px;padding:12px;text-align:center;font-size:1rem;font-weight:750;line-height:1.5;white-space:normal;background:var(--primary-container,#eaddff);border:2px solid var(--primary,#6f4db0);color:var(--on-primary-container,#251340)}
#settingsScreen .settings-language-current bdi{overflow-wrap:anywhere}
#settingsScreen .settings-language-buttons>.settings-choice-button[data-value="auto"][hidden]{display:none!important}
#settingsScreen .settings-language-expand{width:100%;min-height:44px;border:1px solid var(--outline,#8c8590);background:var(--surface,#fff);border-radius:12px;color:var(--on-surface,#242028);font-size:.95rem;font-weight:650;cursor:pointer}
#settingsScreen .settings-language-expand:focus-visible{outline:3px solid var(--primary,#6f4db0);outline-offset:2px}
#settingsScreen .settings-language-expand::after{content:" ▾";display:inline-block}
#settingsScreen .settings-language-expand[aria-expanded="true"]::after{content:" ▴"}
#settingsScreen .settings-language-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#settingsScreen .settings-language-options .settings-choice-button{min-height:44px;padding:8px 5px;font-size:.9rem;font-weight:600}
#settingsScreen .settings-language-options[hidden]{display:none!important}

.language-picker:focus-within{outline:2px solid #8b386d;outline-offset:3px;border-radius:12px;}
.multilingual-status{overflow-wrap:anywhere;}
[hidden]{display:none!important;}
html:not([lang="ja"]) .hero-copy{line-height:1.65;}
html:not([lang="ja"]) .app-actions{flex-wrap:wrap;}
html:not([lang="ja"]) .home-brand h1{font-size:1.2rem;}

/* RTL chrome mirrors directional controls; voices and original speech keep their own script. */
html[dir="rtl"] .switch input:checked+span::after{transform:translateX(-20px)}
html[dir="rtl"] .flow-arrow{transform:scaleX(-1)}
html[dir="rtl"] .research-cta-arrow{transform:translateY(-50%) scaleX(-1)}
.reply-english{direction:ltr;unicode-bidi:isolate;text-align:start}
.play-english-text,.example-reply{direction:ltr;unicode-bidi:isolate}
#runtimeBackend{direction:ltr;unicode-bidi:isolate}
.history-card bdi{unicode-bidi:isolate}
.language-settings,.language-picker,.language-picker select{min-width:0;overflow-wrap:anywhere}
html[lang="ar"]{letter-spacing:normal}

#settingsScreen .language-download-panel{padding:12px 14px;margin:12px 0;border:1px solid var(--outline,#aea5b6);border-radius:14px;background:var(--surface,#fff)}
#settingsScreen .language-download-panel[hidden]{display:none!important}
#settingsScreen .language-download-panel strong{display:block;font-size:.95rem;font-weight:750}
#settingsScreen .language-download-panel p{margin:6px 0 9px;color:var(--on-surface-variant,#605967)}
#settingsScreen .language-download-track{height:9px;border-radius:99px;background:#e4ddeb;overflow:hidden}
#settingsScreen .language-download-fill{height:100%;border-radius:99px;background:var(--primary,#7854b8);transition:width .22s}
#settingsScreen .language-download-track.indeterminate .language-download-fill{animation:language-download-pulse 1.8s ease-in-out infinite}
@keyframes language-download-pulse{0%,100%{opacity:.4;transform:translateX(-45%)}50%{opacity:1;transform:translateX(90%)}}
@media(prefers-reduced-motion:reduce){#settingsScreen .language-download-fill{transition:none!important;animation:none!important}}

/* Category hints live in their own grid row above the avatar, not over its face.
   Two axes form separate, wrapping rows even on 320px Android viewports. */
#homeScreen .avatar-wrap>.reply-topic{
  position:static;inset:auto;justify-self:start;align-self:start;
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  width:max-content;max-width:calc(100% - 24px);min-width:0;
  margin:10px 12px 2px;padding:6px 9px;border-radius:14px;
  white-space:normal;overflow-wrap:anywhere;word-break:normal;
  text-align:start;box-sizing:border-box;
}
#homeScreen .reply-topic .reply-topic-item{
  display:block;max-width:100%;min-width:0;white-space:normal;
  overflow-wrap:anywhere;line-height:1.3;
}
@media(max-width:360px){
  #homeScreen .avatar-wrap>.reply-topic{max-width:calc(100% - 16px);margin-inline:8px;font-size:.68rem}
}