:root {
  color-scheme: light;
  --bg: #f6f0ea;
  --bg-soft: #fbf8f4;
  --panel: rgba(255,255,255,.58);
  --sidebar: rgba(250,247,243,.82);
  --line: rgba(61,48,38,.12);
  --text: #191714;
  --muted: #8e847b;
  --accent: #f36f21;
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Iowan Old Style", Baskerville, Georgia, serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #161513;
  --bg-soft: #1d1b18;
  --panel: rgba(35,32,29,.72);
  --sidebar: rgba(25,23,21,.92);
  --line: rgba(255,243,231,.1);
  --text: #f7f1eb;
  --muted: #b4aaa1;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--text); font-family: var(--font-ui);
  background: radial-gradient(circle at 68% 32%, rgba(255,255,255,.8), transparent 36%), linear-gradient(140deg,var(--bg-soft),var(--bg));
  -webkit-font-smoothing: antialiased;
}
:root[data-theme="dark"] body { background: radial-gradient(circle at 68% 32%,rgba(243,111,33,.06),transparent 36%),linear-gradient(140deg,var(--bg-soft),var(--bg)); }
button,textarea,select { font: inherit; color: inherit; }
button { cursor: pointer; }
.app { min-height:100vh; display:grid; grid-template-columns:292px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:34px 22px 26px; border-right:1px solid var(--line); background:var(--sidebar); backdrop-filter:blur(22px); }
.brand { appearance:none; border:0; background:none; text-align:left; padding:0 10px 54px; }
.brand strong { display:block; font:400 46px/.9 var(--font-display); letter-spacing:-1.5px; }
.brand strong span { color:var(--accent); }
.brand small { display:block; margin-top:10px; text-transform:uppercase; letter-spacing:.17em; font-size:11px; color:var(--muted); }
.primary-nav,.utility-nav { display:grid; gap:6px; }
.nav-button { width:100%; min-height:48px; display:grid; grid-template-columns:24px 1fr auto; align-items:center; gap:12px; border:0; border-radius:14px; padding:0 13px; background:transparent; text-align:left; }
.nav-button:hover,.mode-button:hover,.mode-button.active { background:var(--panel); }
.nav-button kbd { color:var(--muted); font-size:12px; }
.nav-new { margin-bottom:12px; border:1px solid var(--line); background:var(--panel); }
.mode-nav { margin:30px 4px 22px; padding:26px 0 20px; border-block:1px solid var(--line); }
.mode-nav>p { margin:0 10px 14px; color:var(--muted); text-transform:uppercase; letter-spacing:.14em; font-size:10px; font-weight:600; }
.mode-button { width:100%; border:0; background:transparent; display:grid; grid-template-columns:24px 1fr; gap:10px; align-items:center; padding:10px; border-radius:12px; text-align:left; }
.mode-button b { color:var(--accent); font-size:20px; font-weight:500; }
.mode-button span { font-size:13px; }
.utility-nav { margin-top:auto; }
.workspace { min-width:0; min-height:100vh; padding:30px 56px 44px; overflow:hidden; }
.topbar { height:58px; display:flex; justify-content:flex-end; align-items:center; gap:12px; }
.topbar select,.icon-button,.profile-button { height:48px; border:1px solid var(--line); background:var(--panel); border-radius:16px; }
.topbar select { min-width:172px; padding:0 18px; }
.icon-button,.profile-button { width:48px; }
.profile-button { border-radius:50%; }
.hero { min-height:665px; display:grid; justify-items:center; align-content:start; padding-top:48px; }
.hero-copy { text-align:center; }
.hero-copy p { margin:0 0 6px; font:400 43px/1 var(--font-display); }
.hero-copy h1 { margin:0; max-width:970px; font:400 clamp(48px,5vw,77px)/.96 var(--font-display); letter-spacing:-2.2px; }
.hero-copy em { color:var(--accent); font-weight:400; }
.character-row { display:flex; align-items:center; gap:40px; margin-top:24px; }
.dewi-character { width:390px; height:390px; position:relative; border:0; background:transparent; padding:0; transform-origin:50% 84%; }
.dewi-character img { width:100%; height:100%; object-fit:contain; display:block; user-select:none; pointer-events:none; transition:opacity .12s ease; }
.dewi-character[data-state="idle"] { animation:breathe 4.4s ease-in-out infinite; }
.dewi-character[data-state="attentive"] { animation:attentive .42s cubic-bezier(.2,.8,.25,1) both; }
.dewi-character[data-state="receiving"] { animation:receiving .62s cubic-bezier(.2,.8,.25,1) both; }
.dewi-character[data-state="thinking"] { animation:thinking 1.55s ease-in-out infinite; }
.dewi-character[data-state="presenting"] { animation:presenting .72s cubic-bezier(.2,.8,.25,1) both; }
.dewi-character[data-state="error"] { animation:error .46s ease both; filter:saturate(.72) brightness(.88); }
.state-caption { min-width:250px; display:flex; align-items:center; gap:14px; color:var(--muted); font:italic 31px/1.2 var(--font-display); }
.state-caption span { color:var(--accent); font-family:var(--font-ui); font-style:normal; }
.interaction-zone { max-width:920px; margin:-25px auto 0; }
.composer { padding:16px; border:1px solid var(--line); border-radius:24px; background:var(--panel); backdrop-filter:blur(18px); box-shadow:0 22px 70px rgba(89,64,44,.1); }
.composer textarea { width:100%; min-height:74px; resize:none; border:0; outline:0; background:transparent; padding:12px; font-size:18px; }
.composer-row { display:flex; align-items:center; justify-content:space-between; }
.composer-row>div { display:flex; gap:10px; }
.round-button,.send-button { width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:transparent; }
.send-button { background:var(--accent); color:white; border-color:transparent; font-size:24px; }
.send-button:disabled { opacity:.35; cursor:not-allowed; }
.prompt-chips { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; padding-top:18px; }
.prompt-chips button { border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:10px 14px; font-size:13px; }
.conversation { max-width:820px; margin:0 auto 28px; }
.message { padding:18px 22px; border-radius:18px; background:var(--panel); margin:12px 0; line-height:1.55; }
.message.user { margin-left:18%; }
.message.assistant { margin-right:18%; }
@keyframes breathe { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-2px) scale(1.003)} }
@keyframes attentive { from{transform:translateY(0) rotate(0) scale(1)} to{transform:translateY(-5px) rotate(-1.5deg) scale(1.012)} }
@keyframes receiving { 0%{transform:translateY(-4px) scale(1.01)} 48%{transform:translateY(3px) scale(.986,1.016)} 100%{transform:translateY(-1px) scale(1.003)} }
@keyframes thinking { 0%,100%{transform:translate(-2px,0) rotate(-1deg)} 50%{transform:translate(2px,-5px) rotate(1deg) scale(1.008)} }
@keyframes presenting { 0%{transform:translateY(-5px) scale(1.01)} 48%{transform:translateY(4px) scale(.994)} 100%{transform:translateY(0) scale(1)} }
@keyframes error { 0%,100%{transform:translate(0,2px) rotate(-2deg)} 33%{transform:translate(-3px,2px) rotate(-2.8deg)} 67%{transform:translate(3px,2px) rotate(-1.2deg)} }
@media (max-width:900px) {
  .app{grid-template-columns:1fr}.sidebar{display:none}.workspace{padding:22px}.hero-copy p{font-size:34px}.character-row{flex-direction:column;gap:4px}.dewi-character{width:min(340px,82vw);height:min(340px,82vw)}.state-caption{justify-content:center;font-size:25px}.hero{min-height:640px}.topbar select{min-width:140px}
}
@media (prefers-reduced-motion:reduce){.dewi-character{animation:none!important}}