/* light theme tokens and the language/theme switch, shared by the demos */
:root[data-theme="light"]{
  --bg:#F5F5F2;--panel:#FFFFFF;--panel-2:#F0F0EC;--panel-3:#E6E6E1;
  --line:rgba(0,0,0,.08);--line-2:rgba(0,0,0,.14);
  --ink:#121212;--dim:#5E5E5E;--dimmer:#8A8A8A;
  --ok:#1E8050;--ok-soft:rgba(30,128,80,.11);
  --warn:#8F6410;--warn-soft:rgba(143,100,16,.11);
  --bad:#B0402C;--bad-soft:rgba(176,64,44,.11);
  color-scheme:light;
}
:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="light"] .msg.agent{border-color:rgba(30,128,80,.22)}
:root[data-theme="light"] .msg.human{border-color:rgba(143,100,16,.22)}
:root[data-theme="light"] .seg.ok{box-shadow:inset 0 -2px 0 rgba(30,128,80,.45)}
:root[data-theme="light"] .errs li{border-color:rgba(176,64,44,.22)}
:root[data-theme="light"] .errs li.pass{border-color:rgba(30,128,80,.22)}
body{transition:background-color .25s,color .25s}

.switch{position:fixed;top:14px;right:16px;z-index:10;display:flex;gap:8px;align-items:center}
.seg-ctl{display:flex;background:var(--panel);border:1px solid var(--line-2);border-radius:999px;padding:3px}
.seg-ctl button{font:500 12px var(--mono);color:var(--dim);background:none;border:0;border-radius:999px;padding:6px 10px;cursor:pointer;transition:color .2s,background .2s}
.seg-ctl button[aria-pressed="true"]{background:var(--ok);color:var(--bg)}
.theme-btn{width:36px;height:36px;border-radius:999px;border:1px solid var(--line-2);background:var(--panel);color:var(--ink);cursor:pointer;display:grid;place-items:center;font-size:17px}
.switch button:active{transform:scale(.96)}
@media (max-width:860px){.switch{position:static;justify-content:flex-end;padding:12px 16px 0}}