:root { --v4-ink:#283c33; --v4-sage:#547665; --v4-paper:#f8f7f2; --v4-muted:#6f776e; --v4-line:#dce0d6; --v4-panel:#eef0e7; }
body { background:var(--v4-paper); }
#app-container { background:var(--v4-paper); }
.glass-header { background:color-mix(in srgb,var(--v4-paper) 93%,transparent); border-color:var(--v4-line); box-shadow:none; padding-left:4%; padding-right:4%; }
#chat-window { padding:26px 4% 32px; }
.v4-home { max-width:1320px; margin:auto; color:var(--v4-ink); }
.v4-home-topline { display:flex; justify-content:space-between; gap:20px; font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--v4-muted); padding:0 0 30px; }
.v4-home-topline>span:last-child { letter-spacing:.02em; text-transform:none; display:flex; align-items:center; gap:8px; }
.v4-live-dot { width:6px; height:6px; background:var(--v4-sage); border-radius:50%; box-shadow:0 0 0 4px #5476650b; animation:v4-breathe 3s ease-in-out infinite; }
.v4-hero { display:grid; grid-template-columns:1.22fr 1fr; gap:7%; align-items:center; }
.v4-eyebrow { font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.2em; color:var(--v4-sage); margin:0 0 20px; }
.v4-hero h1 { font-family:'Playfair Display',Georgia,serif; font-size:clamp(36px,4vw,63px)!important; font-weight:400; line-height:1.13; letter-spacing:-.045em; margin:0 0 22px; animation:v4-rise 800ms both; }
.v4-hero h1 em { font-weight:400; color:var(--v4-sage); }
.v4-intro { font-size:14px; line-height:1.8; color:var(--v4-muted); max-width:440px; margin-bottom:26px; animation:v4-rise 800ms 100ms both; }
.v4-composer { border:1px solid #c6d0bf; background:#fffefb; padding:19px 20px 12px; border-radius:17px; box-shadow:0 6px 30px #304c3a05,0 1px 3px #304c3a05; animation:v4-rise 800ms 180ms both; transition:border-color .3s,box-shadow .3s; }
.v4-composer:focus-within { border-color:var(--v4-sage); box-shadow:0 0 0 4px #54766510,0 10px 30px #304c3a08; }
.v4-composer label { display:block; font-size:13px; font-weight:500; margin-bottom:10px; }
.v4-composer textarea { resize:vertical; width:100%; min-height:64px; max-height:160px; border:0; outline:none; background:transparent; color:var(--v4-ink); font-size:15px; line-height:1.6; padding:0; }
.v4-composer textarea::placeholder { color:#8a9084!important; -webkit-text-fill-color:#8a9084!important; }
.v4-composer-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:10px; border-top:1px solid #e8ebe2; }
.v4-composer-bottom>span { font-size:10px; color:var(--v4-muted); }
.v4-composer-bottom button { background:var(--v4-ink); color:white; border-radius:9px; padding:10px 16px; font-size:12px; display:flex; align-items:center; gap:15px; transition:background .2s,transform .2s; }
.v4-composer-bottom button:hover { background:var(--v4-sage); transform:translateY(-2px); }
.v4-input-hint { font-size:10px; color:var(--v4-muted); margin:10px 0 18px; }
.v4-starters { display:flex; flex-wrap:wrap; gap:7px; animation:v4-rise 800ms 300ms both; }
.v4-starters button { font-size:11px; border:1px solid var(--v4-line); padding:8px 12px; border-radius:8px; color:var(--v4-muted); background:transparent; text-align:left; transition:transform .2s,background .2s,border-color .2s; }
.v4-starters button:hover { background:white; border-color:#a1b39b; transform:translateY(-2px); }
.v4-starters button span { display:inline-block; margin-left:7px; }
.v4-secondary-actions { display:flex; flex-wrap:wrap; gap:20px; margin-top:22px; }
.v4-secondary-actions button { color:var(--v4-ink); font-size:12px; text-align:left; border:0; border-bottom:1px solid #c7d0c0; padding:0 0 5px; background:transparent; transition:color .2s; }
.v4-secondary-actions button:hover { color:var(--v4-sage); }
.v4-optional { display:block; font-size:9px; color:var(--v4-muted); margin-top:3px; }
.v4-hero-art { position:relative; min-height:560px; border-radius:130px 130px 18px 18px; overflow:hidden; background:radial-gradient(ellipse at 70% 20%,#f0e6d6,transparent 60%),linear-gradient(145deg,#e2e7da,#e7e9df 60%,#e1d8cb); animation:v4-reveal 1.2s 100ms both; padding:34px 30px 20px; display:flex; flex-direction:column; }
.v4-art-caption { display:flex; justify-content:space-between; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:#5a695b; margin-top:20px; padding:0 12px; }
.v4-art-caption>span:last-child { font-size:18px; }
.v4-face-art { position:relative; width:100%; max-width:380px; margin:0 auto; flex:1; display:flex; align-items:center; }
.v4-face-art svg { width:100%; color:#63725f; filter:drop-shadow(0 12px 20px #585c3f0a); animation:v4-float 9s ease-in-out infinite; }
.v4-face-point { animation:v4-breathe 4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.v4-face-point:nth-last-child(2) { animation-delay:1s; }
.v4-scan-line { position:absolute; width:80%; left:10%; top:35%; height:1px; background:linear-gradient(90deg,transparent,#96af91,transparent); box-shadow:0 4px 15px #7c9b7766; animation:v4-scan 8s ease-in-out infinite; }
.v4-floating-note { position:absolute; left:17px; top:58%; border:1px solid #ffffff80; background:#ffffffb5; backdrop-filter:blur(10px); border-radius:9px; padding:12px 15px; font-size:10px; color:var(--v4-ink); box-shadow:0 8px 30px #5563480b; animation:v4-float 7s 1s ease-in-out infinite; }
.v4-floating-note>span { margin-right:8px; color:var(--v4-sage); }
.v4-art-bottom { display:flex; align-items:center; gap:13px; background:#ffffff70; border:1px solid #ffffff70; padding:15px; border-radius:12px; backdrop-filter:blur(10px); position:relative; }
.v4-art-bottom strong { font-size:12px; font-weight:500; }
.v4-art-bottom p { font-size:10px; color:var(--v4-muted); margin:4px 0 0; }
.v4-orb { width:44px; height:44px; flex-shrink:0; position:relative; display:grid; place-items:center; isolation:isolate; }
.v4-orb span { position:absolute; inset:2px; background:linear-gradient(135deg,#b9cbb2aa,#d8c9a9aa); border:1px solid #ffffffa0; border-radius:43% 57% 64% 36% / 40% 46% 54% 60%; animation:v4-orbit 13s linear infinite; }
.v4-orb span:nth-child(2) { transform:rotate(70deg); animation-direction:reverse; opacity:.7; }
.v4-orb span:nth-child(3) { inset:6px; animation-duration:9s; background:#d9e4d8aa; }
.v4-orb b { position:relative; z-index:1; font-size:22px; color:var(--v4-sage); font-weight:400; }
.v4-capabilities { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; border-top:1px solid var(--v4-line); padding-top:25px; margin-top:45px; }
.v4-capabilities article { display:flex; gap:15px; animation:v4-rise 1s 350ms both; }
.v4-cap-number { font-family:Georgia,serif; font-size:12px; color:#8c9b83; padding-top:3px; }
.v4-capabilities h2 { font-size:14px!important; font-weight:500; margin:0 0 6px; }
.v4-capabilities p { color:var(--v4-muted); line-height:1.7; font-size:11px; margin:0; }
.v4-home-footer { display:flex; justify-content:space-between; gap:20px; margin:26px 0; font-size:9px; color:#8a8f83; }
.v4-home-footer>span:last-child { letter-spacing:.14em; }
.v4-care-canvas { display:none; }
.v4-chat-header { display:flex; align-items:center; gap:12px; padding:12px 4%; border-bottom:1px solid var(--v4-line); background:var(--v4-paper); flex-shrink:0; }
.v4-chat-header>button { font-size:20px; color:var(--v4-sage); width:30px; flex-shrink:0; }
.v4-chat-header .v4-orb { width:36px; height:36px; }
.v4-chat-header strong { font-size:12px; font-weight:500; color:var(--v4-ink); }
.v4-chat-header p { font-size:10px; color:var(--v4-muted); margin:4px 0 0; }
.v4-chat-header .v4-chat-products { margin-left:auto; width:auto; font-size:11px; border:1px solid var(--v4-line); border-radius:8px; padding:8px 12px; }
body[data-v4-view="chat"] .v4-care-canvas { display:block; position:absolute; right:0; top:88px; bottom:0; width:320px; overflow-y:auto; border-left:1px solid var(--v4-line); padding:28px 25px; background:var(--v4-panel); color:var(--v4-ink); animation:v4-reveal .7s both; }
body[data-v4-view="chat"] #chat-window { padding-right:calc(320px + 4%); }
body[data-v4-view="chat"] #bottom-panel { padding-right:calc(320px + 4%); padding-left:4%; background:var(--v4-paper); }
.v4-canvas-heading { display:flex; justify-content:space-between; align-items:center; }
.v4-canvas-heading .v4-eyebrow { margin:0; }
.v4-canvas-intro { font-family:'Playfair Display',Georgia,serif; font-size:26px; line-height:1.4; letter-spacing:-.03em; margin:20px 0; }
.v4-canvas-presence { display:flex; align-items:center; gap:12px; padding:15px 0 23px; border-bottom:1px solid var(--v4-line); font-size:11px; color:var(--v4-muted); }
.v4-context { padding:22px 0; border-bottom:1px solid var(--v4-line); }
.v4-context h2,.v4-routine h2 { font-size:11px!important; font-weight:500; margin-bottom:12px; }
.v4-context p { font-size:12px; line-height:1.8; color:var(--v4-muted); overflow-wrap:anywhere; max-height:160px; overflow:auto; }
.v4-routine { padding-top:24px; }
.v4-periods { display:flex; gap:5px; margin-bottom:15px; }
.v4-periods button { border:1px solid var(--v4-line); padding:5px 8px; border-radius:6px; font-size:10px; }
.v4-periods button[aria-pressed="true"] { background:var(--v4-ink); color:white; border-color:var(--v4-ink); }
.v4-routine ol { list-style:none; margin:0; padding:0; }
.v4-routine li { display:flex; gap:12px; padding:16px 0; border-bottom:1px solid var(--v4-line); animation:v4-rise .6s both; animation-delay:calc(var(--v4-order,0) * 90ms); }
.v4-step-num { font-family:Georgia,serif; color:#86987b; font-size:12px; }
.v4-routine li strong { font-size:12px; font-weight:500; }
.v4-routine li p { font-size:11px; color:var(--v4-muted); line-height:1.7; margin:7px 0; }
.v4-routine li button { color:var(--v4-sage); font-size:10px; text-decoration:underline; text-underline-offset:3px; }
.v4-empty-routine { border:1px dashed #c6d0bf; border-radius:10px; padding:22px 16px; color:var(--v4-muted); font-size:11px; line-height:1.7; }
.v4-save { width:100%; border:1px solid #b9c4ae; border-radius:8px; padding:10px; font-size:11px; margin-top:18px; transition:background .2s; }
.v4-save:hover { background:#dce4d4; }
.v4-canvas-disclaimer { font-size:9px; line-height:1.6; color:var(--v4-muted); padding-top:28px; }
body[data-v4-view="chat"] .ai-bubble { background:#fffefb; border:1px solid var(--v4-line); border-radius:0 18px 18px 18px; box-shadow:0 4px 18px #304c3a03; }
body[data-v4-view="chat"] .human-bubble { background:#e8edde; border-color:#dbe1d2; color:var(--v4-ink); border-radius:18px 18px 0 18px; }
body[data-v4-view="chat"] #input-wrapper { border-color:#c6d0bf; background:#fffefb; border-radius:16px; }
body[data-v4-view="chat"] #chat-input { color:var(--v4-ink); }
.v4-preview-note { padding:10px 14px; border:1px solid #d4d7bf; border-radius:8px; background:#f0f1e4; color:#616848; font-size:10px; margin-bottom:18px; }
.v4-preview-note p { margin:4px 0 0; line-height:1.6; }
button:focus-visible,a:focus-visible { outline:2px solid var(--v4-sage); outline-offset:4px; }
@keyframes v4-rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes v4-reveal { from { opacity:0; transform:translateX(14px); } to { opacity:1; transform:translateX(0); } }
@keyframes v4-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes v4-orbit { to { transform:rotate(360deg); } }
@keyframes v4-breathe { 0%,100% { opacity:.6; } 50% { opacity:1; } }
@keyframes v4-scan { 0%,100% { top:32%; opacity:0; } 15%,85% { opacity:.65; } 50% { top:69%; } }
html.dark { --v4-ink:#e6eadf; --v4-sage:#b2c3a5; --v4-paper:#1c261f; --v4-muted:#a9b3a4; --v4-line:#39493b; --v4-panel:#232f25; }
html.dark .v4-composer,html.dark body[data-v4-view="chat"] #input-wrapper,html.dark body[data-v4-view="chat"] .ai-bubble { background:#263328; }
html.dark .v4-composer-bottom button,html.dark .v4-periods button[aria-pressed="true"] { background:#b2c3a5; color:#1c261f; }
html.dark .v4-starters button:hover { background:#263328; }
html.dark .v4-hero-art { --v4-ink:#283c33; --v4-muted:#6f776e; --v4-sage:#547665; }
html.dark body[data-v4-view="chat"] .human-bubble { background:#354833; border-color:#43553e; }
@media(min-width:1600px) { .v4-hero-art { min-height:620px; } }
@media(max-width:1050px) {
  .v4-hero { gap:5%; grid-template-columns:1.2fr 1fr; }
  .v4-hero-art { min-height:510px; padding:25px 18px 18px; border-radius:100px 100px 16px 16px; }
  body[data-v4-view="chat"] .v4-care-canvas { width:270px; padding:25px 18px; }
  body[data-v4-view="chat"] #chat-window,body[data-v4-view="chat"] #bottom-panel { padding-right:calc(270px + 3%); }
  .v4-home-topline { padding-bottom:25px; }
}
@media(max-width:760px) {
  #chat-window { padding:20px 6% 24px; }
  .v4-home-topline { font-size:8px; gap:10px; padding-bottom:26px; }
  .v4-home-topline>span:first-child { max-width:58%; }
  .v4-hero { grid-template-columns:1fr; gap:32px; }
  .v4-hero-copy { max-width:550px; margin:auto; width:100%; }
  .v4-hero h1 { font-size:clamp(34px,8.7vw,56px)!important; }
  .v4-eyebrow { font-size:9px; margin-bottom:15px; }
  .v4-intro { font-size:13px; margin-bottom:22px; }
  .v4-composer { padding:16px 16px 12px; }
  .v4-composer textarea { font-size:16px; }
  .v4-hero-art { min-height:0; max-width:550px; width:100%; margin:auto; border-radius:90px 90px 14px 14px; padding:25px 24px 18px; }
  .v4-face-art { height:280px; max-width:280px; flex:none; }
  .v4-face-art svg { height:310px; }
  .v4-art-caption { margin-top:10px; }
  .v4-floating-note { top:50%; left:20px; }
  .v4-capabilities { grid-template-columns:1fr; gap:22px; margin-top:30px; padding-top:25px; }
  .v4-capabilities h2 { font-size:14px!important; }
  .v4-capabilities p { font-size:12px; }
  .v4-home-footer { flex-direction:column; gap:8px; }
  body[data-v4-view="chat"] #chat-window { padding:22px 5%; }
  body[data-v4-view="chat"] #bottom-panel { padding-right:5%; padding-left:5%; padding-bottom:max(12px,env(safe-area-inset-bottom)); }
  body[data-v4-view="chat"] .v4-care-canvas { position:relative; top:auto; bottom:auto; width:100%; max-height:32dvh; flex-shrink:0; border-left:0; border-top:1px solid var(--v4-line); padding:15px 5%; order:6; }
  body[data-v4-view="chat"] .v4-care-canvas:not(:has(.v4-routine li)) { display:none; }
  .v4-care-canvas .v4-canvas-intro,.v4-care-canvas .v4-canvas-presence,.v4-care-canvas .v4-context,.v4-care-canvas .v4-canvas-disclaimer { display:none; }
  .v4-routine { padding-top:12px; }
  .v4-routine li { padding:10px 0; }
  .v4-secondary-actions { gap:20px; }
  .v4-chat-header { padding:10px 5%; gap:8px; }
  .v4-chat-header .v4-chat-products { max-width:75px; font-size:10px; padding:7px; }
  .v4-chat-header p { font-size:8px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

html[data-beauty-preview] [data-workspace-logo]{height:28px!important;width:auto!important;max-width:170px!important;}