/* Mirror - app styles.
   Layout: sticky top bar with the simulation clock; tabbed workspace (top tabs on desktop, bottom bar on phones);
   the body tab is a two-pane "atlas" (figure + readings). Light = clinical atlas paper, dark = night monitor. */
:root{
  --paper:#F3F6F8; --panel:#FFFFFF; --panel-2:#EAF0F3; --panel-3:#DFE7EC;
  --ink:#13202A; --ink-2:#33424E; --muted:#5D6B77; --line:#D3DCE2; --line-2:#C3CED6;
  --accent:#0C7A84; --accent-ink:#075E66; --accent-soft:#D8EFF0;
  --z-sev:#A3221C; --z-low:#C9473F; --z-ok:#24804F; --z-high:#B07A00; --z-vhigh:#C55A17; --z-crit:#83287F;
  --ins:#2E66C4; --glu:#C25E12; --ket:#6E43C9; --adr:#C42A2A; --glp:#13875F; --cor:#946200; --gh:#5B49B8; --amy:#3F7FA6;
  --org-ok:#E2EBEF; --org-ok-s:#9DB0BC; --org-warn:#FBE5BE; --org-warn-s:#C98F12; --org-danger:#F6CFCB; --org-danger-s:#C13A31; --org-info:#DAE5F4; --org-info-s:#6F8DBA;
  --skin:#EEE5DC; --skin-s:#CDBBAA; --vessel:#B9474C; --vessel-v:#4D6FA8;
  --bug:#CC3D2C; --bug-ink:#A3291B; --bug-soft:#FBE7E4; --patch:#009A86; --patch-ink:#00705F; --patch-soft:#DDF4F0; --gold:#C08013; --gold-ink:#7A4D00; --gold-soft:#FBF0DA;
  --grid-min:#E5ECF0; --grid-maj:#CCD8DF; --trace:#13202A; --cell:#F1F5F7; --cell-line:#9DB0BC; --immune:#C42A2A; --glucose:#B07A00; --glucose-fill:#F8E7BF;
  --shadow:0 1px 2px rgba(19,32,42,.06),0 6px 18px rgba(19,32,42,.06);
  --f-display:"Reem Kufi","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-body:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:12px; --top-h:56px; --nav-h:64px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#0D1319; --panel:#141C24; --panel-2:#1A242E; --panel-3:#223040;
  --ink:#E5ECF1; --ink-2:#C4CFD8; --muted:#8D9BA8; --line:#24313C; --line-2:#2F3E4B;
  --accent:#3CC0C8; --accent-ink:#7AD9DF; --accent-soft:#12343A;
  --z-sev:#FF6B63; --z-low:#F28A7E; --z-ok:#4CC584; --z-high:#E7B53C; --z-vhigh:#F2894A; --z-crit:#D77AD3;
  --ins:#6E9CF0; --glu:#F0954C; --ket:#A98CF2; --adr:#F06B6B; --glp:#3FCB98; --cor:#D9A93C; --gh:#9B8BF0; --amy:#6FB0D8;
  --org-ok:#283846; --org-ok-s:#5C7286; --org-warn:#3B3019; --org-warn-s:#D7A22E; --org-danger:#3E1F22; --org-danger-s:#F06B63; --org-info:#1D2A40; --org-info-s:#6F95D6;
  --skin:#232C34; --skin-s:#3B4955; --vessel:#E06B70; --vessel-v:#7D9DD8;
  --bug:#EA5B4F; --bug-ink:#FF8A80; --bug-soft:#3A1F2A; --patch:#18A390; --patch-ink:#5FD9C6; --patch-soft:#123536; --gold:#F0B44C; --gold-ink:#F6C76E; --gold-soft:#3A3020;
  --grid-min:#18222B; --grid-maj:#24313C; --trace:#E5ECF1; --cell:#18222B; --cell-line:#4A5D6D; --immune:#F06B6B; --glucose:#E7B53C; --glucose-fill:#3B3019;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.25);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#0D1319; --panel:#141C24; --panel-2:#1A242E; --panel-3:#223040;
  --ink:#E5ECF1; --ink-2:#C4CFD8; --muted:#8D9BA8; --line:#24313C; --line-2:#2F3E4B;
  --accent:#3CC0C8; --accent-ink:#7AD9DF; --accent-soft:#12343A;
  --z-sev:#FF6B63; --z-low:#F28A7E; --z-ok:#4CC584; --z-high:#E7B53C; --z-vhigh:#F2894A; --z-crit:#D77AD3;
  --ins:#6E9CF0; --glu:#F0954C; --ket:#A98CF2; --adr:#F06B6B; --glp:#3FCB98; --cor:#D9A93C; --gh:#9B8BF0; --amy:#6FB0D8;
  --org-ok:#283846; --org-ok-s:#5C7286; --org-warn:#3B3019; --org-warn-s:#D7A22E; --org-danger:#3E1F22; --org-danger-s:#F06B63; --org-info:#1D2A40; --org-info-s:#6F95D6;
  --skin:#232C34; --skin-s:#3B4955; --vessel:#E06B70; --vessel-v:#7D9DD8;
  --bug:#EA5B4F; --bug-ink:#FF8A80; --bug-soft:#3A1F2A; --patch:#18A390; --patch-ink:#5FD9C6; --patch-soft:#123536; --gold:#F0B44C; --gold-ink:#F6C76E; --gold-soft:#3A3020;
  --grid-min:#18222B; --grid-maj:#24313C; --trace:#E5ECF1; --cell:#18222B; --cell-line:#4A5D6D; --immune:#F06B6B; --glucose:#E7B53C; --glucose-fill:#3B3019;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.25);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{direction:rtl;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.65;margin:0}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
.num,.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .small{font-size:13px} .tiny{font-size:12px}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:600;line-height:1.35;text-wrap:balance}
h2{font-size:21px} h3{font-size:17px} h4{font-size:15px}
p{margin:0}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;display:flex;align-items:center;gap:10px;padding:8px 16px;background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);min-height:var(--top-h)}
.brand{display:flex;align-items:baseline;gap:8px;min-width:0}
.brand .logo{font-family:var(--f-display);font-size:24px;font-weight:700;color:var(--accent-ink);letter-spacing:0}
.brand .sub{font-size:12.5px;color:var(--muted);white-space:nowrap}
.simbar{margin-inline-start:auto;display:flex;align-items:center;gap:6px;min-width:0}
.clock{font-family:var(--f-mono);font-size:13.5px;padding:4px 10px;border-radius:999px;background:var(--panel-2);white-space:nowrap}
.icon-btn{width:38px;height:38px;display:inline-grid;place-items:center;border-radius:10px;border:1px solid var(--line);background:var(--panel);cursor:pointer;flex:none}
.icon-btn svg{width:18px;height:18px;fill:currentColor}
.icon-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.chip{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:5px 11px;font-size:13px;cursor:pointer;white-space:nowrap}
.chip[aria-pressed="true"],.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip.ghost{background:transparent}
.mode-chip{font-weight:600}
@media (max-width:640px){ .brand .sub{display:none} .topbar{gap:6px;padding-inline:12px} .clock{font-size:12.5px;padding:4px 8px} #modeBtn{display:none} }

/* ---------- tabs ---------- */
.tabs{display:flex;gap:4px;padding:8px 16px 0;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--top-h));z-index:25;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0;background:transparent;padding:9px 14px 11px;border-bottom:3px solid transparent;cursor:pointer;color:var(--muted);font-weight:500;white-space:nowrap;display:flex;align-items:center;gap:7px}
.tabs button svg{width:18px;height:18px;fill:currentColor}
.tabs button[aria-selected="true"]{color:var(--accent-ink);border-bottom-color:var(--accent)}
@media (max-width:820px){
  .tabs{position:fixed;bottom:0;top:auto;left:0;right:0;z-index:40;padding:4px 6px calc(4px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);border-bottom:0;justify-content:space-around;gap:0;box-shadow:0 -6px 18px rgba(0,0,0,.06)}
  .tabs button{flex:1;flex-direction:column;gap:2px;padding:6px 2px;font-size:11.5px;border-bottom:0;border-top:3px solid transparent;min-width:0}
  .tabs button[aria-selected="true"]{border-top-color:var(--accent);border-bottom-color:transparent}
  main{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 92px)!important}
}
main{max-width:1240px;margin:0 auto;padding:16px 16px 96px}
.tab{display:grid;gap:16px}

/* ---------- generic ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;min-width:0}
.card.flat{box-shadow:none}
.card h3{margin-bottom:8px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.grid2{display:grid;gap:16px}
@media (min-width:1000px){.grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--panel-2);padding:3px;border-radius:12px}
.seg button{border:0;background:transparent;padding:6px 12px;border-radius:9px;cursor:pointer;font-size:13.5px;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--panel);color:var(--accent-ink);box-shadow:0 1px 3px rgba(0,0,0,.08);font-weight:600}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:8px 14px;cursor:pointer;font-size:14px}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.danger{border-color:var(--z-sev);color:var(--z-sev)}
.btn.small{padding:5px 10px;font-size:13px}
.btn svg{width:16px;height:16px;fill:currentColor}
.note{border-inline-start:3px solid var(--gold);background:var(--gold-soft);padding:9px 12px;border-radius:0 10px 10px 0;font-size:13.5px}
.note.red{border-color:var(--z-sev);background:var(--bug-soft)}
.note.teal{border-color:var(--accent);background:var(--accent-soft)}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600}
.z-sev{color:var(--z-sev)} .z-low{color:var(--z-low)} .z-ok{color:var(--z-ok)} .z-high{color:var(--z-high)} .z-vhigh{color:var(--z-vhigh)} .z-crit{color:var(--z-crit)}
.bg-sev{background:var(--z-sev);color:#fff} .bg-low{background:var(--z-low);color:#fff} .bg-ok{background:var(--z-ok);color:#fff} .bg-high{background:var(--z-high);color:#1b1300} .bg-vhigh{background:var(--z-vhigh);color:#fff} .bg-crit{background:var(--z-crit);color:#fff}
.field{display:grid;gap:4px}
.field label{font-size:12.5px;color:var(--muted)}
.field input,.field select,.field textarea{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:9px 11px;min-width:0;width:100%}
.field textarea{min-height:70px;resize:vertical}
.toast{position:fixed;inset-inline:16px;bottom:calc(var(--nav-h) + 18px + env(safe-area-inset-bottom,0px));margin:0 auto;max-width:460px;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:12px;z-index:60;box-shadow:var(--shadow);font-size:14px}
@media (min-width:821px){.toast{bottom:20px}}

/* ---------- body tab ---------- */
.body-grid{display:grid;gap:16px}
@media (min-width:1000px){.body-grid{grid-template-columns:minmax(0,420px) minmax(0,1fr)} .figure-card{position:sticky;top:calc(var(--top-h) + 60px);align-self:start}}
.figure-card{padding:10px}
.figure-card svg{display:block;width:100%;max-width:400px;margin:0 auto;height:auto;direction:ltr}
.headline{display:grid;gap:10px}
.gauge{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.gauge .big{font-family:var(--f-mono);font-size:44px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.gauge .unit{font-size:13px;color:var(--muted)}
.gauge .trend{font-size:22px}
.vitals{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.vital{background:var(--panel-2);border-radius:10px;padding:8px 10px;min-width:0}
.vital .k{font-size:12px;color:var(--muted)}
.vital .v{font-family:var(--f-mono);font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.vital.warn{box-shadow:inset 0 -3px 0 var(--z-high)} .vital.danger{box-shadow:inset 0 -3px 0 var(--z-sev)}
.chain{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:c}
.chain li{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:start}
.chain li::before{counter-increment:c;content:counter(c);width:24px;height:24px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--f-mono);font-size:12px;font-weight:600;grid-row:span 2}
.chain .who{font-weight:600;font-size:13px;color:var(--ink-2)}
.chain .what{font-size:14px}
.sym{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sym li{display:flex;gap:8px;align-items:flex-start;font-size:14px}
.sym li i{flex:none;width:10px;height:10px;border-radius:50%;margin-top:7px;background:var(--z-ok)}
.sym li.low i{background:var(--z-low)} .sym li.sev i{background:var(--z-sev)} .sym li.high i{background:var(--z-high)} .sym li.vhigh i{background:var(--z-vhigh)} .sym li.crit i{background:var(--z-crit)}
.organ-panel .vals{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px;margin-top:8px}
.subtabs{display:flex;gap:6px;flex-wrap:wrap}
svg .org{cursor:pointer;transition:filter .2s}
svg .org:hover{filter:brightness(.97)}
svg .org.sel .shape{stroke-width:2.6}
svg .shape{stroke-width:1.4}
svg .lv-ok .shape{fill:var(--org-ok);stroke:var(--org-ok-s)}
svg .lv-warn .shape{fill:var(--org-warn);stroke:var(--org-warn-s)}
svg .lv-danger .shape{fill:var(--org-danger);stroke:var(--org-danger-s)}
svg .lv-info .shape{fill:var(--org-info);stroke:var(--org-info-s)}
svg .skin{fill:var(--skin);stroke:var(--skin-s);stroke-width:1.2}
svg .vessel{fill:none;stroke:var(--vessel);stroke-width:2.2;opacity:.55}
svg .vessel.v{stroke:var(--vessel-v)}
svg .portal{fill:none;stroke:var(--vessel-v);stroke-width:2;opacity:.5;stroke-dasharray:3 3}
svg .olabel{font-family:var(--f-body);font-size:10.5px;fill:var(--muted);pointer-events:none}
svg .dev{fill:var(--panel);stroke:var(--accent);stroke-width:1.5}
svg .pdot{pointer-events:none}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--muted);align-items:center}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-inline-end:5px;vertical-align:middle}

/* hormone bars */
.horm{display:grid;gap:7px}
.h-row{display:grid;grid-template-columns:96px 1fr 44px;gap:8px;align-items:center;font-size:13px}
.h-bar{height:8px;border-radius:99px;background:var(--panel-3);overflow:hidden}
.h-bar i{display:block;height:100%;border-radius:99px;background:var(--c,var(--accent));transition:width .4s}
.h-lvl{font-family:var(--f-mono);font-size:12px;text-align:left;color:var(--muted)}

/* lab table */
.labt{width:100%;border-collapse:collapse;font-size:13.5px}
.labt th,.labt td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:right}
.labt th{color:var(--muted);font-weight:500;font-size:12.5px}
.labt td.v{font-family:var(--f-mono);font-variant-numeric:tabular-nums;text-align:left;direction:ltr}
.labt td.f{font-weight:700;width:28px;text-align:center}
.flag-H{color:var(--z-vhigh)} .flag-L{color:var(--z-low)} .flag-HH,.flag-LL{color:var(--z-sev)}

/* signals */
.strips{display:grid;gap:12px}
@media (min-width:1000px){.strips{grid-template-columns:1fr 1fr}}
.strip{display:grid;gap:6px}
.strip .sh{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.strip .sh b{font-size:14px}
.strip .sh span{font-size:12.5px;color:var(--muted)}
.strip canvas{width:100%;height:110px;border-radius:10px;border:1px solid var(--line);display:block}
.strip canvas.tall{height:150px}
.cellbox canvas{width:100%;height:260px;border-radius:12px;border:1px solid var(--line);display:block;background:var(--panel)}

/* time machine */
.tm-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.chart{position:relative;min-width:0}
.chart svg{display:block;width:100%;height:auto;direction:ltr;touch-action:pan-y}
.c-axis{stroke:var(--line-2);stroke-width:1}
.c-grid{stroke:var(--line);stroke-width:1;stroke-dasharray:2 4}
.c-tick{font-family:var(--f-mono);font-size:11px;fill:var(--muted)}
.c-lab{font-family:var(--f-body);font-size:11.5px;fill:var(--muted)}
.c-dlab{font-family:var(--f-body);font-size:12px;font-weight:600}
.tip{position:absolute;pointer-events:none;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:12.5px;box-shadow:var(--shadow);white-space:nowrap;direction:rtl;z-index:5}
.events-bar{display:flex;flex-wrap:wrap;gap:6px}
.ev-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:8px 12px;cursor:pointer;font-size:13.5px}
.ev-btn svg{width:16px;height:16px;fill:currentColor;color:var(--accent-ink)}
.ev-btn:hover{border-color:var(--accent)}
.presets{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.preset{border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:10px 12px;text-align:right;cursor:pointer;display:grid;gap:3px}
.preset:hover{border-color:var(--accent)}
.preset b{font-size:14px}
.preset span{font-size:12.5px;color:var(--muted)}
.preset.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.evlog{list-style:none;margin:0;padding:0;display:grid;gap:4px;max-height:220px;overflow:auto;font-size:13px}
.evlog li{display:flex;gap:8px}
.evlog li .t{font-family:var(--f-mono);color:var(--muted);flex:none}
.scrub{display:grid;gap:6px}
.scrub input[type=range]{width:100%;accent-color:var(--accent)}
.tiles{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tile{background:var(--panel-2);border-radius:10px;padding:9px 11px;min-width:0}
.tile .k{font-size:12px;color:var(--muted)}
.tile .v{font-family:var(--f-display);font-size:21px;font-weight:600;font-variant-numeric:tabular-nums}
.tile .s{font-size:11.5px;color:var(--muted)}

/* sheet */
.sheet-back{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:70}
.sheet{position:fixed;inset-inline:0;bottom:0;z-index:71;background:var(--panel);border-radius:18px 18px 0 0;padding:16px 16px calc(18px + env(safe-area-inset-bottom,0px));max-height:85vh;overflow:auto;box-shadow:0 -10px 30px rgba(0,0,0,.2);display:grid;gap:12px;max-width:640px;margin:0 auto}
.sheet h3{font-size:18px}
.opt-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.opt{border:1px solid var(--line);background:var(--panel-2);border-radius:12px;padding:10px;cursor:pointer;text-align:center;display:grid;gap:2px}
.opt b{font-size:14px}
.opt span{font-size:12px;color:var(--muted)}
.opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}

/* immune */
.imm-map{display:grid;gap:16px}
@media (min-width:1000px){.imm-map{grid-template-columns:minmax(0,430px) minmax(0,1fr)}}
.imm-map svg{display:block;width:100%;max-width:430px;height:auto;margin:0 auto;direction:ltr}
svg .node rect{fill:var(--panel-2);stroke:var(--line-2);stroke-width:1.2}
svg .node.target rect{fill:var(--org-danger);stroke:var(--z-low)}
svg .node{cursor:pointer}
svg .node.sel rect{stroke:var(--accent);stroke-width:2.6}
svg .t-title{font-family:var(--f-display);font-size:15px;font-weight:600;fill:var(--ink)}
svg .t-sub{font-family:var(--f-body);font-size:11px;fill:var(--muted)}
svg .t-lab{font-family:var(--f-body);font-size:10.5px;fill:var(--muted)}
svg .flow{fill:none;stroke:var(--muted);stroke-width:1.4}
svg .flow.attack{stroke:var(--bug);stroke-width:2.4}
svg .flow.antigen{stroke:var(--z-crit);stroke-dasharray:5 4}
svg .flow.calm{stroke:var(--patch);stroke-width:2}
svg .badge circle{fill:var(--bug)}
svg .badge text{font-family:var(--f-mono);font-size:11px;font-weight:700;fill:#fff}
pre.code{margin:0;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-family:var(--f-mono);font-size:12.5px;line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere;direction:rtl;text-align:right}
pre.code .kw{color:var(--accent-ink);font-weight:500} pre.code .cm{color:var(--muted)} pre.code .bugline{color:var(--bug-ink);font-weight:500} pre.code .str{color:var(--patch-ink)}
.dot{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:11px;font-weight:700;color:#fff;font-family:var(--f-mono);background:var(--bug);vertical-align:middle;flex:none}
.cards3{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:700px){.cards3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.cards3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bugcard{border-top:3px solid var(--bug)}
.lvl{font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap}
.lvl.approved{background:var(--patch);color:#fff} .lvl.phase3{background:var(--patch-soft);color:var(--patch-ink)} .lvl.phase2{background:var(--accent-soft);color:var(--accent-ink)}
.lvl.early{background:var(--panel-2);color:var(--muted);border:1px solid var(--line)} .lvl.animal{background:var(--panel-2);color:var(--muted);border:1px dashed var(--muted)}
.lvl.failed{background:var(--bug-soft);color:var(--bug-ink)} .lvl.unproven{background:var(--gold-soft);color:var(--gold-ink)}
.age{padding:1px 8px;border-radius:999px;font-size:12px;border:1px solid var(--line)}
.age.yes{border-color:var(--patch);color:var(--patch-ink)} .age.trial{border-color:var(--gold);color:var(--gold-ink)} .age.no{color:var(--muted)}

/* log */
.kind-chips{display:flex;flex-wrap:wrap;gap:6px}
.entries{list-style:none;margin:0;padding:0;display:grid;gap:2px;max-height:420px;overflow:auto}
.entries li{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:7px 4px;border-bottom:1px solid var(--line);font-size:14px}
.entries li .t{font-family:var(--f-mono);font-size:12.5px;color:var(--muted)}
.entries li .v{font-family:var(--f-mono);font-weight:600}
.entries li button{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:4px}
.flags{display:grid;gap:10px}
.flag{border:1px solid var(--line);border-inline-start:4px solid var(--z-high);border-radius:10px;padding:10px 12px;display:grid;gap:4px;background:var(--panel)}
.flag.p1{border-inline-start-color:var(--z-sev)} .flag.p3{border-inline-start-color:var(--accent)}
.flag b{font-size:14.5px}
.flag .why{font-size:13.5px;color:var(--ink-2)}
.flag .ev{font-size:12.5px;color:var(--muted)}

/* assistant */
.ai-wrap{display:grid;gap:10px;grid-template-rows:auto 1fr auto;min-height:calc(100dvh - var(--top-h) - 140px)}
.msgs{display:flex;flex-direction:column;gap:10px;overflow:auto;padding:4px 2px;min-height:240px}
.msg{max-width:min(720px,92%);padding:10px 13px;border-radius:14px;font-size:14.5px;line-height:1.75;white-space:normal;overflow-wrap:anywhere}
.msg.user{align-self:flex-start;background:var(--accent);color:#fff;border-end-start-radius:4px}
.msg.bot{align-self:flex-end;background:var(--panel);border:1px solid var(--line);border-end-end-radius:4px}
.msg.sys{align-self:center;background:var(--panel-2);font-size:13px;color:var(--muted)}
.msg.bot p+p{margin-top:8px}
.msg.bot ul{margin:6px 0;padding-inline-start:18px}
.msg .act{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--accent-ink);background:var(--accent-soft);border-radius:999px;padding:2px 9px;margin:2px 0}
.composer{display:flex;gap:8px;align-items:flex-end}
.composer textarea{flex:1;min-width:0;width:0;border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:10px 12px;min-height:46px;max-height:140px;resize:none}
.quick{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.quick::-webkit-scrollbar{display:none}
.quick .chip{flex:none}
.quiz{display:grid;gap:8px;border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--panel-2)}
.quiz .q{font-weight:600}
.quiz button{text-align:right;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:8px 10px;cursor:pointer}
.quiz button.right{border-color:var(--z-ok);background:color-mix(in srgb,var(--z-ok) 14%,var(--panel))}
.quiz button.wrong{border-color:var(--z-sev);background:color-mix(in srgb,var(--z-sev) 12%,var(--panel))}
.typing{display:inline-flex;gap:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s} .typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.fab{position:fixed;inset-inline-end:16px;bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom,0px));z-index:35;width:54px;height:54px;border-radius:50%;border:0;background:var(--accent);color:#fff;box-shadow:var(--shadow);display:grid;place-items:center;cursor:pointer}
.fab svg{width:24px;height:24px;fill:currentColor}
@media (min-width:821px){.fab{bottom:22px}}

/* report (screen preview and print) */
.report-doc{background:#fff;color:#111;border-radius:8px;padding:24px;font-size:13px;line-height:1.6;max-width:820px;margin:0 auto;box-shadow:var(--shadow)}
.report-doc h1{font-size:20px} .report-doc h2{font-size:16px;margin-top:14px;border-bottom:1px solid #ccc;padding-bottom:4px}
.report-doc table{width:100%;border-collapse:collapse;margin-top:6px}
.report-doc td,.report-doc th{border:1px solid #ddd;padding:4px 6px;text-align:right;font-size:12px}
.report-doc .kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}
.report-doc .kpi div{border:1px solid #ddd;border-radius:6px;padding:6px}
.report-doc .kpi b{display:block;font-size:16px;font-family:var(--f-mono)}
@media print{
  body{background:#fff!important}
  body.printing .topbar,body.printing .tabs,body.printing main,body.printing .fab,body.printing .toast{display:none!important}
  body.printing #printArea{display:block!important}
  .report-doc{box-shadow:none;max-width:none;padding:0}
  @page{size:A4;margin:14mm}
}
#printArea{display:none}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ======== additions: figure, time machine, immune, log, report, assistant ======== */
.bg-info{background:var(--accent-soft);color:var(--accent-ink)}
/* body figure */
svg .limb-o{stroke:var(--skin-s);stroke-linecap:round}
svg .limb{stroke:var(--skin);stroke-linecap:round}
svg .vessel.thin{stroke-width:1.2;opacity:.35}
svg .flows path{fill:none;stroke:none}
svg .lab line{stroke:var(--line-2);stroke-width:1}
svg .lab text{font-family:var(--f-body);font-size:10.5px;fill:var(--muted)}
svg .inner{fill:none;stroke:var(--org-ok-s);stroke-width:1;opacity:.75;pointer-events:none}
svg .lv-warn .inner{stroke:var(--org-warn-s)} svg .lv-danger .inner{stroke:var(--org-danger-s)}
svg .islet{fill:var(--ins)}
svg .bladder{fill:var(--panel);stroke:var(--skin-s);stroke-width:1.2}
svg .urine{fill:var(--glucose)}
svg .dev-dot{fill:var(--accent)}
svg .dev-line{fill:none;stroke:var(--accent);stroke-width:1.5}
svg .org .hit{fill:none;stroke:transparent;stroke-width:14}
svg .org[data-id="blood"].lv-warn .hit{stroke:var(--org-warn-s);stroke-opacity:.25}
svg .org[data-id="blood"].lv-danger .hit{stroke:var(--org-danger-s);stroke-opacity:.3}
svg .org[data-id="blood"].sel .hit{stroke:var(--accent);stroke-opacity:.35}
svg .org:focus-visible{outline:none}
svg .org:focus-visible .shape{stroke:var(--accent);stroke-width:2.6}
.p-glc{fill:var(--glucose-fill);stroke:var(--glucose);stroke-width:1}
.p-ins{fill:var(--ins)} .p-glu{fill:var(--glu)} .p-ket{fill:var(--ket)} .p-ffa{fill:var(--cor)} .p-wat{fill:var(--amy)} .p-co2{fill:var(--muted)}
/* charts legend swatches */
.sw{display:inline-block;width:18px;height:3px;border-radius:2px;vertical-align:middle;margin-inline-end:5px}
.sw.dash{background:transparent!important;border-top:2px dashed var(--muted);height:0}
.mk{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;margin-inline-end:5px}
.chart .tip b{font-weight:600}
/* time machine */
.tm-grid{display:grid;gap:16px}
@media (min-width:1100px){.tm-grid{grid-template-columns:minmax(0,1fr) 360px}.tm-wide{grid-column:1/-1}}
.tm-side{display:grid;gap:16px;align-content:start;min-width:0}
.evlog li.pending{color:var(--accent-ink)}
.linkbtn{border:0;background:transparent;color:var(--z-low);cursor:pointer;font-size:12.5px;margin-inline-start:auto;padding:0 4px}
.story{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.story li{display:grid;grid-template-columns:62px 1fr;gap:10px;align-items:start;font-size:14px}
.story .sv{font-family:var(--f-mono);font-weight:700;font-size:17px;text-align:center;background:var(--panel-2);border-radius:8px;padding:3px 0}
.date-in{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:6px 10px;min-width:0}
.fut-ctrl{display:grid;gap:8px;margin-top:8px}
/* immune */
.imm-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.imm-toc{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.imm-toc::-webkit-scrollbar{display:none}
.imm-toc a{white-space:nowrap;text-decoration:none;color:var(--ink);font-size:13px;padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel)}
.imm-toc a:hover{border-color:var(--accent)}
.imm-sec{display:grid;gap:12px;scroll-margin-top:calc(var(--top-h) + 64px)}
.imm-sec > h3{font-size:19px}
.detail{display:grid;gap:12px;align-content:start}
.detail .d-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.detail .d-head h3{font-size:21px;margin:0}
.tag-row{display:flex;flex-wrap:wrap;gap:6px}
.btn-chip{font:inherit;font-size:13px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);border-radius:999px;padding:3px 10px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.btn-chip.patch{background:var(--patch-soft);color:var(--patch-ink);border-color:transparent}
.btn-chip.bug{background:var(--bug-soft);color:var(--bug-ink);border-color:transparent}
.btn-chip.gold{background:var(--gold-soft);color:var(--gold-ink);border-color:transparent}
.btn-chip:hover{border-color:var(--accent)}
.mini-h{font-family:var(--f-display);font-size:15px;font-weight:600;margin-bottom:6px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:13px;margin:0}
.kv dt{color:var(--muted)} .kv dd{margin:0}
.bugcard{display:grid;gap:8px;align-content:start}
.bugcard .bh{display:flex;gap:10px;align-items:flex-start}
.bugcard h4{font-size:15.5px}
.scroll-x{overflow-x:auto}
.api-table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.api-table th,.api-table td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:right;vertical-align:top}
.api-table th{font-weight:600;color:var(--muted);font-size:13px}
@media (max-width:600px){
  .api-table{min-width:0}.api-table thead{display:none}
  .api-table,.api-table tbody,.api-table tr,.api-table td{display:block;width:100%}
  .api-table tr{border-bottom:1px solid var(--line);padding-block:8px}
  .api-table td{border:0;padding:2px 0}
  .api-table td[data-l]::before{content:attr(data-l);display:block;color:var(--muted);font-size:12px}
}
.two-msgs{display:grid;gap:12px}
@media (min-width:760px){.two-msgs{grid-template-columns:1fr 1fr}}
.imsg{display:grid;gap:8px;min-width:0}
.imsg .cap{font-size:13.5px;font-weight:600}
.imsg.attack .cap{color:var(--bug-ink)} .imsg.calm .cap{color:var(--patch-ink)}
.invent{border-top:4px solid var(--gold);display:grid;gap:16px}
.loop-grid{display:grid;gap:16px;align-items:start}
@media (min-width:900px){.loop-grid{grid-template-columns:minmax(0,360px) minmax(0,1fr)}}
.loop-fig svg{display:block;width:100%;max-width:360px;height:auto;margin-inline:auto;direction:ltr}
svg .lp rect{fill:var(--gold-soft);stroke:var(--gold);stroke-width:1.4}
svg .lp .lt{font-family:var(--f-display);font-size:16px;font-weight:600;fill:var(--ink)}
svg .lp .ls{font-family:var(--f-body);font-size:11px;fill:var(--muted)}
svg .lp-arrow{fill:none;stroke:var(--gold);stroke-width:2}
svg .gate circle{fill:var(--panel);stroke:var(--patch);stroke-width:2;stroke-dasharray:4 3}
svg .gate text{font-family:var(--f-body);font-size:11.5px;fill:var(--patch-ink);font-weight:600}
svg .gate text.sub{font-weight:400;fill:var(--muted);font-size:10.5px}
svg .mk-muted{fill:var(--muted)} svg .mk-bug{fill:var(--bug)} svg .mk-mag{fill:var(--z-crit)} svg .mk-gold{fill:var(--gold)}
svg .t-lab.red{fill:var(--bug-ink);font-weight:600} svg .t-lab.mag{fill:var(--z-crit)} svg .t-lab.calm{fill:var(--patch-ink)}
svg .flow.antigen{stroke:var(--z-crit)}
svg .node:hover rect{stroke:var(--accent)}
svg .node.sel rect{fill:var(--accent-soft)}
svg .node.target.sel rect{fill:var(--org-danger)}
svg .hla{fill:var(--panel);stroke:var(--z-crit)}
svg .hla-t{font-family:var(--f-mono);font-size:10px;fill:var(--z-crit)}
.steps{display:grid;gap:10px}
.step{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start}
.step .n{grid-row:span 2;width:30px;height:30px;border-radius:50%;background:var(--gold-soft);color:var(--gold-ink);display:grid;place-items:center;font-family:var(--f-mono);font-weight:600;border:1px solid var(--gold)}
.step p{font-size:14px}
.cols{display:grid;gap:12px}
@media (min-width:760px){.cols{grid-template-columns:1fr 1fr}}
ul.clean{margin:0;padding-inline-start:18px;display:grid;gap:6px;font-size:14px}
.box{background:var(--panel-2);border-radius:10px;padding:12px 14px;min-width:0}
.group{display:grid;gap:10px}
.group h3{font-size:17px}
.group .gd{font-size:13.5px;color:var(--muted)}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:grid;gap:6px;align-content:start;min-width:0}
.pcard.flash,.bugcard.flash{outline:2px solid var(--patch);outline-offset:2px}
.pcard .ph{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;justify-content:space-between}
.pcard h4{font-size:15px}
.pcard .does{font-size:14px} .pcard .ev{font-size:13px;color:var(--muted)}
.pcard .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px}
.fixes{display:inline-flex;gap:4px}
.now{display:grid;gap:12px}
.todo{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:8px}
.todo.urgent{border-inline-start:4px solid var(--bug)}
.todo h3{font-size:16px}
.deadline{font-family:var(--f-mono);font-size:12.5px;color:var(--bug-ink)}
.deadline.soon{font-weight:700} .deadline.past{color:var(--muted);text-decoration:line-through}
.sources{font-size:13px;display:grid;gap:4px;padding-inline-start:18px;margin:0}
/* log */
.add-form,.prof-form{display:grid;gap:10px;margin-top:10px}
@media (min-width:560px){.add-form,.prof-form{grid-template-columns:1fr 1fr}}
label.btn{cursor:pointer}
.paste{width:100%;margin:6px 0;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--panel);font-family:var(--f-mono);font-size:12px;direction:ltr}
.sel{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:6px 10px}
.tile.good{box-shadow:inset 0 -3px 0 var(--z-ok)} .tile.warn{box-shadow:inset 0 -3px 0 var(--z-high)} .tile.bad{box-shadow:inset 0 -3px 0 var(--z-sev)}
.tir-bar{display:flex;height:12px;border-radius:6px;overflow:hidden;margin-top:12px;direction:ltr;background:var(--panel-3)}
.tir-bar i{display:block;height:100%}
.tb-vlow{background:var(--z-sev)} .tb-low{background:var(--z-low)} .tb-ok{background:var(--z-ok)} .tb-high{background:var(--z-high)} .tb-vhigh{background:var(--z-vhigh)}
#logTirLeg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:5px;vertical-align:middle}
.entries li .v{direction:ltr}
/* report overlay */
.report-overlay{position:fixed;inset:0;z-index:80;background:var(--paper);display:grid;grid-template-rows:auto 1fr}
.report-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 16px calc(10px);padding-top:calc(10px + env(safe-area-inset-top,0px));border-bottom:1px solid var(--line);background:var(--panel)}
.report-scroll{overflow:auto;padding:16px 16px calc(24px + env(safe-area-inset-bottom,0px))}
body.report-open{overflow:hidden}
/* assistant */
.acts{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.msg .act svg{width:12px;height:12px;fill:currentColor}
.msg .err{color:var(--z-low)}
.guide{margin:0;padding-inline-start:20px;display:grid;gap:8px;font-size:14px}
@media print{ body.printing .report-overlay,body.printing #sheet,body.printing #sheetBack{display:none!important} }

/* layout fixes from the first screen test */
.gauge .pill{justify-self:start}
input[type=range]{direction:ltr}
@media (max-width:999px){
  .headline{display:contents}
  .headline > .card:first-child{order:1}
  .figure-card{order:2}
  #sub-organs,#sub-signals,#sub-lab{order:3}
  .figure-card svg{max-width:min(400px,calc(56vh * 0.571))}
}
.msg button.act{border:0;cursor:pointer;font:inherit;font-size:12px}
.msg button.act:hover{text-decoration:underline}
@media (max-width:420px){.vital{padding:7px 8px}.vital .v{font-size:16px}.gauge .big{font-size:40px}}
.vital{overflow-wrap:anywhere}

/* ======================= v2: family, community, settings ======================= */
:root{
  --k-bg:#FFF7EA; --k-card:#FFFFFF; --k-ink:#2A2733; --k-ink-2:#4A4558; --k-muted:#6E6879; --k-line:#F0E2C8;
  --k-sun:#FFC23D; --k-sun-ink:#8A5A00; --k-sky:#4AA3E8; --k-grass:#33B873; --k-berry:#E8487C; --k-grape:#8E6CE0; --k-orange:#FF8A3D; --k-mist:#A7B4C2; --k-sos:#E0322F;
  --k-cheek:#FF8FA8; --k-mouth:#7A2E3A; --k-shadow:0 2px 0 rgba(42,39,51,.06),0 8px 20px rgba(42,39,51,.08);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --k-bg:#151724; --k-card:#1F2233; --k-ink:#F3EFE6; --k-ink-2:#D2CCDD; --k-muted:#A39DB2; --k-line:#2E3247;
  --k-sun:#FFC94F; --k-sun-ink:#FFD98A; --k-sky:#5DB2F0; --k-grass:#45C985; --k-berry:#F0628F; --k-grape:#A285F0; --k-orange:#FF9B57; --k-mist:#7D8A99; --k-sos:#F04C47;
  --k-cheek:#E87A95; --k-mouth:#5A1F2A; --k-shadow:0 2px 0 rgba(0,0,0,.25),0 8px 20px rgba(0,0,0,.3);
}}
:root[data-theme="dark"]{
  --k-bg:#151724; --k-card:#1F2233; --k-ink:#F3EFE6; --k-ink-2:#D2CCDD; --k-muted:#A39DB2; --k-line:#2E3247;
  --k-sun:#FFC94F; --k-sun-ink:#FFD98A; --k-sky:#5DB2F0; --k-grass:#45C985; --k-berry:#F0628F; --k-grape:#A285F0; --k-orange:#FF9B57; --k-mist:#7D8A99; --k-sos:#F04C47;
  --k-cheek:#E87A95; --k-mouth:#5A1F2A; --k-shadow:0 2px 0 rgba(0,0,0,.25),0 8px 20px rgba(0,0,0,.3);
}

/* top bar: patient, bell; the simulation controls only on simulation tabs */
.patient-chip{font-weight:600;max-width:42vw;overflow:hidden;text-overflow:ellipsis}
.patient-chip:not(.single)::after{content:"";display:inline-block;width:0;height:0;margin-inline-start:6px;border-inline:4px solid transparent;border-top:5px solid currentColor;vertical-align:middle}
.topacts{display:flex;gap:6px;align-items:center;flex:none}
.simbar{display:none}
body.sim-on .simbar{display:flex}
body:not(.sim-on) .topacts{margin-inline-start:auto}
.bell{position:relative}
.badge{position:absolute;top:-4px;inset-inline-end:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--z-sev);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;font-family:var(--f-mono);line-height:1}
.tabs button{position:relative}
.tabs .badge{top:2px;inset-inline-end:calc(50% - 26px)}
@media (min-width:821px){.tabs .badge{position:static;margin-inline-start:4px}}
@media (max-width:640px){ body.sim-on .brand{display:none} .patient-chip{max-width:34vw} }
.sim-nav{display:flex;justify-content:center}
.sim-nav .seg button{display:inline-flex;align-items:center;gap:6px}
.sim-nav .seg svg{width:16px;height:16px;fill:currentColor}

/* avatars, presence */
.ava{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;color:#fff;font-weight:700;font-size:14px;flex:none;font-family:var(--f-body)}
.ava.big{width:44px;height:44px;font-size:19px}
.online{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.online::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.online.on{color:var(--z-ok)} .online.on::before{background:var(--z-ok)}

/* notifications */
.note-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.note-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;padding:8px;border-radius:10px;cursor:pointer}
.note-item:hover{background:var(--panel-2)}
.note-item.unread{background:var(--accent-soft)}
.note-item.urgent{box-shadow:inset 3px 0 0 var(--z-sev)}
.ni-ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--panel-2)}
.ni-ic svg{width:16px;height:16px;fill:currentColor}
.ni-ic.k-sos,.ni-ic.k-alert{background:var(--bug-soft);color:var(--z-sev)} .ni-ic.k-reading{background:var(--gold-soft);color:var(--gold-ink)} .ni-ic.k-mood{background:var(--accent-soft);color:var(--accent-ink)} .ni-ic.k-kid,.ni-ic.k-task{background:var(--patch-soft);color:var(--patch-ink)}
.ni-tx{display:grid;gap:1px;min-width:0}
.ni-tx b{font-size:14px} .ni-tx span{font-size:13px;color:var(--ink-2);overflow-wrap:anywhere}
.ni-t{font-size:12px;color:var(--muted);white-space:nowrap}

/* home */
.home-head{display:flex;flex-wrap:wrap;gap:10px;align-items:end;justify-content:space-between}
.home-grid{display:grid;gap:16px;align-items:start}
@media (min-width:1000px){.home-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.home-col{display:grid;gap:16px;min-width:0}
.hm-status{display:grid;gap:10px}
.hm-g{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.hm-g .big{font-family:var(--f-mono);font-size:46px;font-weight:600;line-height:1}
.hm-g .unit{font-size:13px;color:var(--muted)} .hm-g .trend{font-size:24px}
.hm-spark{display:block;width:100%;height:72px;direction:ltr}
.hs-band{fill:var(--patch-soft)} .hs-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round} .hs-dot{fill:var(--accent)}
.hm-mini{display:grid;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr))}
.hm-quick{display:flex;flex-wrap:wrap;gap:6px}
.task-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.task-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 4px;border-bottom:1px solid var(--line)}
.task-list li.done .tl-x b{text-decoration:line-through;color:var(--muted)}
.tl-t{font-size:13px;color:var(--muted)} .tl-x{display:grid;min-width:0}
.sim-tag{display:inline-block;font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--gold-soft);color:var(--gold-ink);margin-inline-start:4px;vertical-align:1px}
.hm-kid{display:grid;gap:10px}
.hk-dev{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:0}
.hk-dev.ok{color:var(--z-ok)} .hk-dev svg{width:14px;height:14px;fill:currentColor;vertical-align:-2px}
.hk-dev.bad{border:1px solid var(--z-sev);background:var(--bug-soft);border-radius:12px;padding:8px 10px;justify-content:space-between}
.hk-dev.bad p{margin:0;flex:1 1 220px}
.clean-ol{margin:0;padding-inline-start:20px;display:grid;gap:8px;line-height:1.7}
.hm-kidrow{display:grid;gap:8px;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));align-items:stretch}
.hk-mood{display:flex;align-items:center;gap:8px;background:var(--panel-2);border-radius:10px;padding:8px;font-size:13px}
.hk-mood .face{width:40px;height:40px;flex:none}
.face.dim{opacity:.35}
.hm-tip p+p{margin-top:6px}
.gd-bar{height:8px;border-radius:4px;background:var(--panel-3);overflow:hidden;margin:8px 0}
.gd-bar i{display:block;height:100%;background:var(--z-ok);border-radius:4px;transition:width .4s}
.gd-sec{border-top:1px solid var(--line);padding:6px 0}
.gd-sec summary{display:flex;justify-content:space-between;cursor:pointer;padding:6px 2px;list-style:none}
.gd-sec summary::-webkit-details-marker{display:none}
.gd-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.gd-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:start}
.gd-list label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.gd-list input{margin-top:5px;width:18px;height:18px;accent-color:var(--z-ok);flex:none}
.gd-list label span{display:grid;gap:2px}
.gd-list li.done label b{color:var(--muted);text-decoration:line-through}
.mem-list{list-style:none;margin:8px 0;padding:0;display:grid;gap:6px}
.mem-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
.mem-list li > span:nth-child(2){display:grid;min-width:0}
.mem-list.big li{grid-template-columns:auto minmax(0,1fr) auto;padding:6px 0;border-bottom:1px solid var(--line)}
.mem-list.big li > .row{grid-column:1/-1;justify-content:flex-start}
@media (min-width:700px){.mem-list.big li{grid-template-columns:auto minmax(0,1fr) auto auto}.mem-list.big li > .row{grid-column:auto}}
.mem-list.pick button{display:flex;gap:10px;align-items:center;width:100%;text-align:right;border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:8px 10px;cursor:pointer}
.mem-list.pick button span{display:grid}
.clog{display:grid;gap:8px;max-height:60vh;overflow:auto;padding:2px}
.cl{border-radius:12px;padding:8px 10px;background:var(--panel-2);max-width:88%}
.cl.kid{justify-self:start;background:var(--accent-soft)} .cl.ai{justify-self:end} .cl.sys{justify-self:center;background:var(--gold-soft);max-width:100%}
.cl.f-urgent,.cl.f-sos{box-shadow:inset 3px 0 0 var(--z-sev)} .cl.f-concern{box-shadow:inset 3px 0 0 var(--z-high)}
.cl p{font-size:14px;overflow-wrap:anywhere}

/* community */
.comm{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-height:calc(100dvh - var(--top-h) - 150px)}
@media (min-width:900px){.comm{grid-template-columns:320px minmax(0,1fr)}}
.comm-rooms{display:grid;gap:10px;align-content:start;min-width:0}
.room-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.room{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:right;border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:10px;cursor:pointer}
.room.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.room-tx{display:grid;min-width:0}
.room-tx .tiny{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink)}
.room-ic svg{width:17px;height:17px;fill:currentColor}
.cnt{min-width:22px;height:22px;border-radius:11px;background:var(--accent);color:#fff;font-style:normal;font-size:12px;font-weight:700;display:grid;place-items:center;padding:0 6px}
.comm-chat{display:grid;grid-template-rows:auto 1fr auto auto;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px;min-width:0;min-height:460px;max-height:calc(100dvh - var(--top-h) - 120px)}
@media (max-width:899px){.comm:not(.in-room) .comm-chat{display:none}.comm.in-room .comm-rooms{display:none}.comm-chat{max-height:calc(100dvh - var(--top-h) - var(--nav-h) - 60px)}}
@media (min-width:900px){.cm-back{display:none}}
.cm-head{display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:8px}
.cm-head > div{display:grid;min-width:0}
.cm-msgs{overflow:auto;display:flex;flex-direction:column;gap:10px;padding:4px 2px;min-height:200px}
.cm-empty{display:grid;place-items:center;grid-row:1/-1}
.cm-m{display:flex;gap:8px;align-items:flex-end;max-width:88%}
.cm-m.me{align-self:flex-end;flex-direction:row-reverse}
.cm-b{background:var(--panel-2);border-radius:14px;padding:7px 11px;min-width:0}
.cm-m.me .cm-b{background:var(--accent-soft)}
.cm-meta{display:flex;gap:8px;align-items:center;font-size:12.5px}
.cm-b p{font-size:14.5px;overflow-wrap:anywhere}
.cm-more{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:0 2px;margin-inline-start:auto;display:grid}
.cm-more svg{width:16px;height:16px;fill:currentColor}
.cm-sticker{display:flex;align-items:center;gap:8px;padding:2px 0}
.cm-stk-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff}
.cm-stk-ic svg{width:24px;height:24px;fill:currentColor}
.cm-m.sos .cm-b{background:var(--bug-soft);border:1px solid var(--z-sev)}
.cm-sos{display:flex;gap:6px;align-items:center;color:var(--z-sev)}
.cm-sos svg{width:20px;height:20px;fill:currentColor}
.cm-stks{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;max-height:180px;overflow:auto}
.cm-sb{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:5px;cursor:pointer;font-size:12.5px;text-align:right}
.cm-sb .cm-stk-ic{width:28px;height:28px;border-radius:8px} .cm-sb .cm-stk-ic svg{width:17px;height:17px}
.cm-voice{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:2px 0}
.cm-voice audio{height:40px;width:250px;max-width:100%}
.cm-recbar{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:14px;padding:6px 8px;background:var(--panel)}
.cm-dot{width:12px;height:12px;border-radius:50%;background:var(--z-sev);animation:blinkdot 1s infinite;flex:none}
@keyframes blinkdot{50%{opacity:.25}}
.cm-lvl{flex:1;height:8px;border-radius:4px;background:var(--panel-2);overflow:hidden;min-width:40px}
.cm-lvl i{display:block;height:100%;width:0;background:var(--accent);transition:width .1s}
.cm-older{align-self:center}
.cm-ro{text-align:center}
/* sticker colours */
.s-sun{fill:var(--k-sun)} .s-sky{fill:var(--k-sky)} .s-grass{fill:var(--k-grass)} .s-berry{fill:var(--k-berry)} .s-grape{fill:var(--k-grape)} .s-orange{fill:var(--k-orange)} .s-mist{fill:var(--k-mist)} .s-sos{fill:var(--k-sos)} .s-card{fill:var(--k-card)} .s-ink{fill:var(--k-ink)}
.s-line{stroke:var(--k-ink)}
span.s-sun,.cm-stk-ic.s-sun,.k-stk.s-sun{background:var(--k-sun);color:#3d2a00} span.s-sky{background:var(--k-sky)} span.s-grass{background:var(--k-grass)} span.s-berry{background:var(--k-berry)} span.s-grape{background:var(--k-grape)} span.s-orange{background:var(--k-orange)} span.s-sos{background:var(--k-sos)}

/* settings */
.set-head{display:flex;justify-content:space-between;align-items:center}
.set-grid{display:grid;gap:16px;align-items:start}
@media (min-width:1000px){.set-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.set-col{display:grid;gap:16px;min-width:0}
.set-card{display:grid;gap:10px;scroll-margin-top:calc(var(--top-h) + 60px)}
.set-form{display:grid;gap:10px}
.ava-pick{display:flex;flex-wrap:wrap;gap:6px}
.ava-c{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer}
.ava-c.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--panel) inset}
.tgl-list{display:grid;gap:8px}
.tgl{display:flex;gap:10px;align-items:center;cursor:pointer}
.tgl input{position:absolute;opacity:0;width:1px;height:1px}
.tgl-ui{width:42px;height:24px;border-radius:12px;background:var(--line-2);position:relative;flex:none;transition:background .2s}
.tgl-ui::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:inset-inline-start .2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.tgl input:checked + .tgl-ui{background:var(--z-ok)}
.tgl input:checked + .tgl-ui::after{inset-inline-start:21px}
.tgl input:focus-visible + .tgl-ui{outline:2px solid var(--accent);outline-offset:2px}
.tgl > span:last-child{display:grid}
.tgl.sm .tgl-ui{width:36px;height:20px} .tgl.sm .tgl-ui::after{width:14px;height:14px} .tgl.sm input:checked + .tgl-ui::after{inset-inline-start:19px}
.big-code{font-size:44px;font-weight:600;letter-spacing:6px;text-align:center;padding:14px;border-radius:14px;background:var(--panel-2);direction:ltr}
.code-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.code-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
.code-sm{font-weight:600;letter-spacing:2px}
.wrap-any{overflow-wrap:anywhere}
.rem-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.rem-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.rem-list li.off{opacity:.55}
.rl-t{font-weight:600} .rl-x{display:grid;min-width:0}
.rem-list .icon-btn{width:34px;height:34px}
.cp-chars{display:flex;gap:10px}
.cp-char{display:grid;justify-items:center;gap:4px;border:1px solid var(--line);border-radius:14px;padding:8px 14px;cursor:pointer;background:var(--panel)}
.cp-char.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.cp-char input{position:absolute;opacity:0;width:1px;height:1px}
.buddy.mini svg{width:64px;height:64px}
.code-in{font-family:var(--f-mono);font-size:22px;letter-spacing:4px;text-align:center}
input[type=range]{accent-color:var(--accent);min-width:0;flex:1}

/* ======================= the child's screen ======================= */
body.kid-mode > .topbar,body.kid-mode > .tabs,body.kid-mode > main,body.kid-mode > .fab{display:none!important}
body.kid-mode{background:var(--k-bg)}
body.kid-open{overflow:hidden}
.kid{position:fixed;inset:0;z-index:90;overflow:auto;background:var(--k-bg);color:var(--k-ink);font-size:18px;-webkit-overflow-scrolling:touch}
.kid button{font:inherit;color:inherit}
.kid-wrap{max-width:860px;margin:0 auto;padding:calc(10px + env(safe-area-inset-top,0px)) 16px calc(104px + env(safe-area-inset-bottom,0px));display:grid;gap:12px;min-height:100%;align-content:start}
.kid-top{display:flex;align-items:center;gap:8px}
.kid-me{display:flex;align-items:center;gap:8px;margin-inline-end:auto;min-width:0}
.kid-me b{font-family:var(--f-display);font-size:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kid-icon{width:46px;height:46px;border-radius:50%;border:0;background:var(--k-card);box-shadow:var(--k-shadow);display:grid;place-items:center;cursor:pointer;flex:none}
.kid-icon svg{width:22px;height:22px;fill:var(--k-ink-2)}
.kid-icon[aria-pressed="false"] svg{opacity:.35}
.kid-stars{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;background:var(--k-sun);color:#3d2a00;font-weight:700;font-size:20px;padding:6px 14px 6px 12px;cursor:pointer;box-shadow:var(--k-shadow)}
.kid-stars svg{width:24px;height:24px;fill:#fff}
.kid-stars.bump{animation:bump .5s}
@keyframes bump{30%{transform:scale(1.18)}60%{transform:scale(.95)}}
.kid-banner{background:var(--k-card);border:1px dashed var(--k-line);border-radius:14px;padding:8px 12px;font-size:14px;color:var(--k-muted)}
.kid-hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center}
.buddy{border:0;background:transparent;padding:0;cursor:pointer;display:grid;place-items:center}
.kid-hero .buddy svg{width:128px;height:128px;transition:width .25s,height .25s}
.kid-wrap.compact .kid-hero .buddy svg{width:76px;height:76px}
.kid-wrap.compact .kid-bubble{font-size:16px;padding:10px 12px}
.bud{overflow:visible}
.bud-body{animation:float 3.2s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes float{50%{transform:translateY(-5px) rotate(-2deg)}}
.b-star .b-fill{fill:var(--k-sun);stroke:var(--k-sun)}
.b-robot .b-fill{fill:var(--k-sky)} .b-robot .b-face{fill:var(--k-card)} .b-robot .b-dark{fill:var(--k-ink-2)} .b-robot .b-ant{fill:var(--k-berry)}
.bud .b-cheek{fill:var(--k-cheek);opacity:.75}
.bud .eye{fill:#2A2733;animation:blink 4.2s infinite;transform-origin:center;transform-box:fill-box}
.bud .b-glint{fill:#fff}
@keyframes blink{0%,46%,50%,100%{transform:scaleY(1)}48%{transform:scaleY(.1)}}
.bud .mouth{fill:var(--k-mouth);transform-origin:center;transform-box:fill-box}
.talking .bud .mouth{animation:talk .2s infinite alternate}
@keyframes talk{from{transform:scaleY(.4)}to{transform:scaleY(1.45)}}
.bud .b-sleep{display:none}
.bud .b-sleep path{fill:none;stroke:#2A2733;stroke-width:5;stroke-linecap:round}
.bud .b-z{font-family:var(--f-display);font-size:28px;font-weight:700;fill:var(--k-grape)} .bud .b-z.small{font-size:20px}
.sleeping .bud .b-eyes{display:none} .sleeping .bud .b-sleep{display:inline} .sleeping .bud .mouth{transform:scaleY(.4)}
.kid-bubble{position:relative;background:var(--k-card);border-radius:20px;padding:12px 16px;box-shadow:var(--k-shadow);font-size:19px;line-height:1.6;min-width:0}
.kid-bubble::before{content:"";position:absolute;inset-inline-start:-9px;top:28px;border:10px solid transparent;border-inline-end-color:var(--k-card);border-inline-start:0}
.kb-name{display:block;font-size:13px;color:var(--k-muted);font-weight:600}
.kid-bubble.pop{animation:pop .35s}
@keyframes pop{0%{transform:scale(.96)}60%{transform:scale(1.02)}}
.kid-main{display:grid;gap:14px;min-width:0}
.kid-wrap > *,.kid-main > *,.k-chat > *,.k-family > *,.k-club > *,.k-lesson > *,.k-game > *{min-width:0}
.k-sec{display:grid;gap:10px}
.k-h{font-family:var(--f-display);font-size:22px;font-weight:700;margin:4px 0 0}
.k-h.small{font-size:18px}
.k-sub{color:var(--k-muted);font-size:16px}
.k-note{color:var(--k-muted);font-size:16px;text-align:center;padding:10px}
.k-feel{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px}
.k-face{display:grid;justify-items:center;gap:4px;border:0;border-radius:18px;background:var(--k-card);box-shadow:var(--k-shadow);padding:10px 4px;cursor:pointer;font-size:15px;font-weight:600}
.k-face .face{width:58px;height:58px}
.k-face[aria-pressed="true"]{outline:3px solid var(--k-grape);outline-offset:-3px}
.face .f-ink{fill:#2A2733} .face .f-stroke{fill:none;stroke:#2A2733;stroke-width:3.4;stroke-linecap:round} .face .f-thin{fill:none;stroke:#2A2733;stroke-width:2.4;stroke-linecap:round}
.face .f-white{fill:#fff;stroke:#2A2733;stroke-width:1.4} .face .f-tear{fill:#4AA3E8}
.k-tasks{display:grid;gap:8px}
.k-task{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--k-card);border-radius:18px;padding:10px 12px;box-shadow:var(--k-shadow)}
.k-task.done{opacity:.65}
.kt-ic{width:46px;height:46px;border-radius:14px;background:var(--k-sky);display:grid;place-items:center}
.kt-ic svg{width:26px;height:26px;fill:#fff}
.kt-tx{display:grid;min-width:0} .kt-tx b{font-size:18px} .kt-tx span{font-size:15px;color:var(--k-muted)}
.kt-done{display:inline-flex;align-items:center;gap:4px;color:var(--k-grass);font-weight:700;font-size:16px}
.kt-done svg{width:20px;height:20px;fill:currentColor}
.k-btn{border:0;border-radius:999px;background:var(--k-grass);color:#fff;font-weight:700;font-size:18px;min-height:52px;padding:8px 22px;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.15);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.k-btn svg{width:22px;height:22px;fill:currentColor}
.k-btn:active{transform:translateY(2px);box-shadow:none}
.k-btn.ghost{background:var(--k-card);color:var(--k-ink);box-shadow:var(--k-shadow)}
.k-btn.wide{width:100%}
.k-btn:disabled{opacity:.5}
.k-sugar{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;background:var(--k-card);border-radius:18px;padding:10px 14px;box-shadow:var(--k-shadow);font-size:16px;color:var(--k-muted)}
.k-sugar b{font-size:30px;color:var(--k-ink);direction:ltr}
.k-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:640px){.k-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.k-tile{position:relative;display:grid;justify-items:center;align-content:center;gap:6px;min-height:118px;border:0;border-radius:22px;color:#fff;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.14);padding:12px 8px;text-align:center}
.k-tile svg{width:40px;height:40px;fill:currentColor}
.k-tile b{font-size:18px} .k-tile span{font-size:14px;opacity:.9}
.k-tile:active{transform:translateY(3px);box-shadow:none}
.t-chat{background:var(--k-grape)} .t-learn{background:var(--k-sky)} .t-games{background:var(--k-orange)} .t-family{background:var(--k-berry)} .t-club{background:var(--k-grass)} .t-stars{background:var(--k-sun);color:#3d2a00}
.k-badge{position:absolute;top:8px;inset-inline-end:10px;min-width:28px;height:28px;border-radius:14px;background:#fff;color:var(--k-sos);font-style:normal;font-weight:800;display:grid;place-items:center;font-size:16px;padding:0 7px}
/* chat */
.k-chat{display:grid;gap:10px}
.k-msgs{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow:auto;padding:4px}
.k-m{max-width:86%;padding:10px 14px;border-radius:18px;font-size:18px;line-height:1.55;overflow-wrap:anywhere}
.k-m.me{align-self:flex-start;background:var(--k-sky);color:#fff;border-end-start-radius:6px}
.k-m.bot{align-self:flex-end;background:var(--k-card);box-shadow:var(--k-shadow);border-end-end-radius:6px}
.k-m.wait{color:var(--k-muted)}
.k-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.k-chips::-webkit-scrollbar{display:none}
.k-chip{flex:none;border:0;border-radius:999px;background:var(--k-card);box-shadow:var(--k-shadow);padding:10px 16px;font-size:16px;cursor:pointer;white-space:nowrap}
.k-chip.go{background:var(--k-grass);color:#fff;font-weight:700}
.k-compose{display:flex;gap:8px;align-items:center}
.k-compose input{flex:1;min-width:0;border:2px solid var(--k-line);background:var(--k-card);color:var(--k-ink);border-radius:999px;padding:12px 18px;font-size:18px}
.k-mic,.k-send{width:54px;height:54px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;flex:none;box-shadow:0 3px 0 rgba(0,0,0,.15)}
.k-mic{background:var(--k-orange)} .k-send{background:var(--k-grape)}
.k-mic svg,.k-send svg{width:26px;height:26px;fill:#fff}
.k-mic.on{animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--k-orange) 30%,transparent)}}
/* lessons */
.k-lessons{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.k-lcard{position:relative;display:grid;gap:4px;justify-items:center;border:0;border-radius:20px;background:var(--k-card);box-shadow:var(--k-shadow);padding:10px;cursor:pointer;text-align:center}
.k-lcard .scene{width:100%;max-width:150px;height:auto}
.k-lcard b{font-size:16px}
.k-check{position:absolute;top:8px;inset-inline-start:8px;width:28px;height:28px;border-radius:50%;background:var(--k-grass);display:grid;place-items:center}
.k-check svg{width:18px;height:18px;fill:#fff}
.k-lesson{display:grid;gap:12px}
.k-prog{display:flex;gap:6px;justify-content:center}
.k-prog i{width:12px;height:12px;border-radius:50%;background:var(--k-line)} .k-prog i.on{background:var(--k-grape)} .k-prog i.q{border-radius:3px}
.k-slide{display:grid;gap:12px;justify-items:center;background:var(--k-card);border-radius:24px;padding:16px;box-shadow:var(--k-shadow);text-align:center}
.k-slide .scene{width:100%;max-width:340px;height:auto}
.k-slide p{font-size:22px;line-height:1.6;font-weight:600}
.k-nav{display:flex;justify-content:space-between;gap:10px}
.k-q{font-size:22px;font-weight:700;text-align:center}
.k-opts{display:grid;gap:10px}
.k-opt{border:3px solid var(--k-line);background:var(--k-card);border-radius:20px;padding:14px;font-size:20px;font-weight:600;cursor:pointer;text-align:center}
.k-opt.right{border-color:var(--k-grass);background:color-mix(in srgb,var(--k-grass) 18%,var(--k-card))}
.k-opt.wrong{border-color:var(--k-sos);opacity:.6}
/* games */
.k-games{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.k-gcard{display:grid;gap:4px;justify-items:center;border:0;border-radius:24px;padding:14px;cursor:pointer;box-shadow:var(--k-shadow);background:var(--k-card)}
.k-gcard .scene{width:100%;max-width:220px}
.k-gcard b{font-size:20px} .k-gcard span{font-size:15px;color:var(--k-muted)}
.k-game{display:grid;gap:12px}
.kg-top{display:flex;justify-content:space-between;font-size:22px;font-weight:700}
.kg-top span{display:inline-flex;align-items:center;gap:6px}
.kg-top svg{width:24px;height:24px;fill:var(--k-ink-2)}
.kg-field{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:stretch}
.kg-meter{position:relative;border-radius:22px;background:var(--k-card);box-shadow:var(--k-shadow);overflow:hidden;min-height:240px;display:flex;align-items:flex-end}
.kg-meter i{display:block;width:100%;height:30%;background:var(--k-grass);border-radius:0 0 22px 22px;transition:height .3s,background .3s}
.kg-meter i.mid{background:var(--k-sun)} .kg-meter i.hi{background:var(--k-orange)}
.kg-meter span{position:absolute;inset:0;writing-mode:vertical-rl;display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--k-ink-2)}
.kg-cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kg-cell{position:relative;aspect-ratio:1/1.05;border:0;border-radius:18px 18px 14px 14px;background:var(--k-sky);cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.14);overflow:visible;max-width:100%}
.kg-roof{position:absolute;left:-6%;right:-6%;top:-18%;height:36%;background:var(--k-grape);clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:6px}
.kg-door{position:absolute;bottom:0;left:34%;width:32%;height:46%;background:var(--k-card);border-radius:10px 10px 0 0;transform-origin:right center;transition:transform .35s}
.kg-sugar{position:absolute;bottom:4%;right:6%;width:26%;aspect-ratio:1;border-radius:50%;background:var(--k-sun);box-shadow:0 0 0 3px #fff;transform:scale(0);transition:transform .2s}
.kg-cell.wait .kg-sugar{transform:scale(1);animation:hop .6s infinite alternate}
@keyframes hop{to{translate:0 -6px}}
.kg-cell.open .kg-door{transform:perspective(200px) rotateY(70deg)}
.kg-cell.open{background:var(--k-grass);box-shadow:0 0 0 4px var(--k-sun),0 4px 0 rgba(0,0,0,.14)}
.kg-cell.miss{background:var(--k-orange)}
.kg-cell.shake{animation:shake .3s}
@keyframes shake{25%{translate:-4px 0}75%{translate:4px 0}}
.kg-tip{font-size:18px;text-align:center;font-weight:600}
.k-breathe{display:grid;gap:14px;justify-items:center;text-align:center}
.kb-stage{height:300px;display:grid;place-items:center;width:100%}
.kb-balloon{width:200px;transform:scale(.75);will-change:transform}
.kb-balloon .scene{width:100%;height:auto}
.kb-say{font-size:24px;font-weight:700;min-height:2.2em}
.kb-count{font-size:22px;color:var(--k-muted)}
/* family and club */
.k-family,.k-club{display:grid;gap:10px}
.k-fmsgs{display:flex;flex-direction:column;gap:10px;max-height:44vh;overflow:auto;padding:4px;background:var(--k-card);border-radius:20px;box-shadow:var(--k-shadow)}
.k-fm{display:flex;gap:8px;align-items:flex-end;max-width:90%}
.k-fm.me{align-self:flex-start;flex-direction:row-reverse}
.k-fm:not(.me){align-self:flex-end}
.k-fb{background:var(--k-bg);border-radius:18px;padding:8px 12px;display:grid;gap:2px;min-width:0}
.k-fm.me .k-fb{background:color-mix(in srgb,var(--k-sky) 22%,var(--k-card))}
.k-fn{font-size:13px;color:var(--k-muted);font-weight:700}
.k-fb p{font-size:18px;overflow-wrap:anywhere}
.k-ft{font-size:12px;color:var(--k-muted)}
.k-fstk,.k-qs{display:flex;align-items:center;gap:8px}
.k-stk{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;flex:none}
.k-stk svg{width:26px;height:26px;fill:currentColor}
.k-fsos{display:flex;align-items:center;gap:6px;color:var(--k-sos);font-weight:700}
.k-fsos svg{width:22px;height:22px;fill:currentColor}
.k-quick{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.k-quick.wrap{flex-wrap:wrap}
.k-quick::-webkit-scrollbar{display:none}
.k-qs{flex:none;border:0;border-radius:18px;background:var(--k-card);box-shadow:var(--k-shadow);padding:8px 12px 8px 8px;cursor:pointer;font-size:15px}
.k-qs b{font-weight:600}
.k-cfeed{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;max-height:46vh;overflow:auto}
.k-cpost{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 8px;align-items:center;background:var(--k-card);border-radius:18px;padding:10px;box-shadow:var(--k-shadow)}
.k-cn{font-weight:700;font-size:15px}
.k-cpost .k-fstk{grid-column:1/-1}
/* stars */
.k-starsp{display:grid;gap:12px;justify-items:center;text-align:center}
.k-bigstar{position:relative;width:170px;height:170px;display:grid;place-items:center}
.k-bigstar svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--k-sun)}
.k-bigstar b{position:relative;font-size:40px;color:#3d2a00;margin-top:10px}
.k-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;width:100%;max-width:440px;height:120px;align-items:end}
.k-wd{display:grid;grid-template-rows:1fr auto;height:100%;gap:4px;font-size:12px;color:var(--k-muted)}
.k-wd i{align-self:end;display:block;background:var(--k-sun);border-radius:8px 8px 4px 4px;min-height:4px}
.k-badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;width:100%}
.k-badge2{display:grid;justify-items:center;gap:4px;background:var(--k-card);border-radius:18px;padding:10px;box-shadow:var(--k-shadow);opacity:.45;filter:grayscale(1)}
.k-badge2.won{opacity:1;filter:none}
.k-badge2 span{width:52px;height:52px;border-radius:50%;background:var(--k-sun);display:grid;place-items:center}
.k-badge2 span svg{width:30px;height:30px;fill:#fff}
.k-badge2 b{font-size:14px}
/* the help button and overlays */
.kid-sos{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:92;display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;background:var(--k-sos);color:#fff;font-size:20px;font-weight:800;padding:14px 28px;box-shadow:0 6px 0 rgba(0,0,0,.18),0 10px 24px rgba(224,50,47,.35);cursor:pointer;white-space:nowrap}
.kid-sos svg{width:28px;height:28px;fill:currentColor}
.kid-sos:active{transform:translateX(-50%) translateY(3px)}
.kid-layer{position:fixed;inset:0;z-index:95;background:color-mix(in srgb,var(--k-bg) 80%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px}
.k-big{border:0;border-radius:22px;font-size:22px;font-weight:800;padding:16px 24px;min-height:64px;cursor:pointer;background:var(--k-card);color:var(--k-ink);box-shadow:var(--k-shadow);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.k-big svg{width:28px;height:28px;fill:currentColor}
.k-big.red{background:var(--k-sos);color:#fff}
.k-big.go{background:var(--k-grass);color:#fff}
.k-sos-ask{background:var(--k-card);border-radius:28px;padding:22px;max-width:480px;width:100%;display:grid;gap:16px;text-align:center;box-shadow:var(--k-shadow)}
.k-sos-ask h2{font-family:var(--f-display);font-size:24px;line-height:1.5}
.k-sos-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.k-sos-ic{width:84px;height:84px;border-radius:50%;background:var(--k-sos);display:grid;place-items:center;justify-self:center}
.k-sos-ic svg{width:48px;height:48px;fill:#fff}
.k-cele{position:relative;display:grid;justify-items:center;gap:10px;text-align:center}
.k-cele p{font-size:24px;font-weight:800;max-width:420px}
.k-cele-star{position:relative;width:150px;height:150px;display:grid;place-items:center;animation:cele .6s ease-out}
.k-cele-star svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--k-sun)}
.k-cele-star b{position:relative;font-size:34px;color:#3d2a00;margin-top:8px}
@keyframes cele{0%{transform:scale(.2) rotate(-40deg)}70%{transform:scale(1.1) rotate(8deg)}100%{transform:scale(1)}}
.k-burst{position:absolute;inset:0;pointer-events:none}
.k-burst i{position:absolute;left:50%;top:75px;width:26px;height:26px;margin:-13px;animation:fly 1s ease-out forwards;animation-delay:var(--d);opacity:0}
.k-burst i svg{width:100%;height:100%;fill:var(--k-sun)}
@keyframes fly{0%{opacity:1;transform:rotate(var(--a)) translateY(0) scale(.6)}100%{opacity:0;transform:rotate(var(--a)) translateY(-160px) scale(1.1)}}
.k-splash{display:grid;justify-items:center;gap:14px;text-align:center}
.k-splash h1{font-family:var(--f-display);font-size:34px}
.buddy.big svg{width:200px;height:200px}
.scene{display:block}
/* ---------- a child who cannot read yet: pictures, big buttons, everything spoken ---------- */
.c-sun{--c:var(--k-sun)} .c-sky{--c:var(--k-sky)} .c-grass{--c:var(--k-grass)} .c-berry{--c:var(--k-berry)} .c-grape{--c:var(--k-grape)} .c-orange{--c:var(--k-orange)} .c-sos{--c:var(--k-sos)}
.kid .hl{outline:4px solid var(--k-sun);outline-offset:3px;box-shadow:0 0 0 9px color-mix(in srgb,var(--k-sun) 32%,transparent);transition:outline-color .2s,box-shadow .2s}
.kid-icon.help svg{fill:var(--k-grape)}
.kid-banner.warn{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:space-between;border-style:solid;border-color:var(--k-orange);color:var(--k-ink);background:color-mix(in srgb,var(--k-orange) 12%,var(--k-card))}
.k-link{border:0;background:var(--k-orange);color:#fff;border-radius:999px;padding:7px 14px;font-size:14px!important;font-weight:700;cursor:pointer}
.kid-bubble{cursor:pointer;padding-inline-end:46px}
.kb-again{position:absolute;inset-inline-end:10px;bottom:10px;width:30px;height:30px;border-radius:50%;background:var(--k-bg);display:grid;place-items:center}
.kb-again svg{width:17px;height:17px;fill:var(--k-muted)}
/* tasks: tap to hear, a big green tick */
.k-task{grid-template-columns:minmax(0,1fr) auto}
.kt-say{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;border:0;background:transparent;padding:0;text-align:start;cursor:pointer;min-width:0;border-radius:14px}
.kt-ic{background:var(--c,var(--k-sky))}
.c-sun.kt-ic svg{fill:#3d2a00}
.kt-time{display:flex!important;align-items:center;gap:8px}
.kt-ok{width:62px;height:62px;border-radius:50%;border:0;background:var(--k-grass);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.15);flex:none}
.kt-ok svg{width:36px;height:36px;fill:#fff}
.kt-ok:active{transform:translateY(3px);box-shadow:none}
.kt-ok:disabled{opacity:.5}
.kt-done{width:50px;height:50px;border-radius:50%;justify-content:center;background:color-mix(in srgb,var(--k-grass) 18%,var(--k-card))}
.kt-done svg{width:30px;height:30px}
.k-clock{position:relative;display:inline-block;width:40px;height:40px;flex:none}
.k-clock svg{width:100%;height:100%;display:block}
.kc-face{fill:var(--k-card);stroke:var(--k-ink-2);stroke-width:2}
.kc-tick line{stroke:var(--k-muted);stroke-width:1.6;stroke-linecap:round}
.kc-h{stroke:var(--k-ink);stroke-width:3.4;stroke-linecap:round}
.kc-m{stroke:var(--k-ink);stroke-width:2.2;stroke-linecap:round}
.kc-c{fill:var(--k-sos)}
.k-clock i{position:absolute;bottom:-4px;inset-inline-end:-7px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--k-sun)}
.k-clock.night i{background:var(--k-grape)}
.k-clock i svg{width:13px;height:13px;fill:#fff}
.k-tile.ping{animation:ping 1s 3}
@keyframes ping{50%{transform:scale(1.06);box-shadow:0 0 0 10px color-mix(in srgb,var(--k-berry) 30%,transparent)}}
/* chat: picture answers and the big microphone */
.k-pics{display:flex;gap:10px;overflow-x:auto;padding:6px 4px 8px;scrollbar-width:none}
.k-pics::-webkit-scrollbar{display:none}
.k-pics.offer{flex-wrap:wrap;justify-content:center;overflow:visible}
.k-pic{flex:none;display:grid;justify-items:center;align-content:start;gap:4px;border:0;background:transparent;padding:4px 0;cursor:pointer;width:84px;color:var(--k-ink);border-radius:20px}
.kp-ic{width:70px;height:70px;border-radius:22px;background:var(--c,var(--k-sky));display:grid;place-items:center;box-shadow:0 4px 0 rgba(0,0,0,.14);transition:transform .15s}
.kp-ic svg{width:40px;height:40px;fill:#fff}
.c-sun .kp-ic svg,.c-sun .ko-ic svg{fill:#3d2a00}
.kp-l{font-size:13px;line-height:1.3;text-align:center;color:var(--k-muted)}
.k-pics.offer .k-pic{width:112px} .k-pics.offer .kp-ic{width:96px;height:96px;border-radius:28px} .k-pics.offer .kp-ic svg{width:54px;height:54px} .k-pics.offer .kp-l{font-size:16px;color:var(--k-ink);font-weight:700}
.k-pic:active .kp-ic{transform:translateY(3px);box-shadow:none}
.kid .k-pic.hl{outline:none;box-shadow:none} .k-pic.hl .kp-ic{outline:4px solid var(--k-sun);outline-offset:3px;transform:scale(1.08)}
.k-talkrow{display:flex;align-items:center;justify-content:center;gap:14px;position:relative;min-height:56px}
.k-talkrow .k-keys{position:absolute;inset-inline-end:0;width:42px;height:42px}
.k-bigmic{position:relative;width:96px;height:96px;border-radius:50%;border:0;background:var(--k-orange);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.16),0 10px 24px color-mix(in srgb,var(--k-orange) 35%,transparent);--p:0;--lv:0;flex:none}
.k-bigmic .kr-ic{display:grid;place-items:center;position:relative;z-index:1}
.k-bigmic svg{width:50px;height:50px;fill:#fff}
.k-bigmic:active{transform:translateY(3px)}
.k-bigmic.on{background:var(--k-sos);animation:mic 1.1s infinite}
.k-bigmic.wait,.k-bigmic:disabled{opacity:.5;cursor:default}
@keyframes mic{50%{box-shadow:0 0 0 16px color-mix(in srgb,var(--k-sos) 25%,transparent)}}
.k-bigmic.rec{width:112px;height:112px;background:var(--k-berry)}
.k-bigmic.rec svg{width:58px;height:58px}
.k-bigmic.rec.on{background:conic-gradient(var(--k-sos) calc(var(--p) * 360deg),color-mix(in srgb,var(--k-sos) 35%,var(--k-card)) 0);animation:none;box-shadow:0 0 0 calc(4px + var(--lv) * 18px) color-mix(in srgb,var(--k-sos) 22%,transparent)}
.k-bigmic.rec.on::after{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--k-sos)}
.k-m.bot{border:0;font:inherit;color:inherit;text-align:start;cursor:pointer;position:relative;padding-inline-end:40px}
.km-say{position:absolute;inset-inline-end:8px;bottom:8px;width:26px;height:26px;border-radius:50%;background:var(--k-bg);display:grid;place-items:center}
.km-say svg{width:15px;height:15px;fill:var(--k-muted)}
.k-m.draft{opacity:.65;font-style:italic}
/* lessons: tap the picture to hear it again, arrows, picture answers */
.k-slide{border:0;font:inherit;color:inherit;cursor:pointer;position:relative}
.k-again{position:absolute;top:12px;inset-inline-end:12px;width:38px;height:38px;border-radius:50%;background:var(--k-bg);display:grid;place-items:center}
.k-again svg{width:21px;height:21px;fill:var(--k-muted)}
.k-arrow{width:78px;height:78px;border-radius:50%;border:0;background:var(--k-card);box-shadow:var(--k-shadow);display:grid;place-items:center;cursor:pointer}
.k-arrow svg{width:42px;height:42px;fill:var(--k-ink-2)}
.k-arrow.go{background:var(--k-grass);box-shadow:0 5px 0 rgba(0,0,0,.15)} .k-arrow.go svg{fill:#fff}
.k-arrow.quiz{background:var(--k-grape)}
.k-arrow:active{transform:translateY(3px)}
.k-q{display:flex;gap:10px;align-items:center;justify-content:center;border:0;background:var(--k-card);border-radius:20px;padding:14px 16px;box-shadow:var(--k-shadow);font:inherit;font-size:21px;font-weight:700;color:var(--k-ink);cursor:pointer;text-align:center;width:100%}
.k-q svg{width:28px;height:28px;fill:var(--k-grape);flex:none}
.k-opts{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.k-opts.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.k-opts.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.k-opt{display:grid;justify-items:center;align-content:start;gap:8px;padding:14px 6px;font-size:16px;line-height:1.35;color:var(--k-ink)}
.ko-ic{width:84px;height:84px;border-radius:26px;background:var(--c,var(--k-sky));display:grid;place-items:center;max-width:100%}
.ko-ic svg{width:52px;height:52px;fill:#fff}
.k-opt.wrong .ko-ic{filter:grayscale(1)}
.kb-dots{display:flex;gap:10px;justify-content:center}
.kb-dots i{width:22px;height:22px;border-radius:50%;background:var(--k-line);transition:background .3s}
.kb-dots i.on{background:var(--k-berry)}
/* family: voice messages, messages read aloud */
.k-play{display:grid;grid-template-columns:auto minmax(70px,1fr) auto;gap:10px;align-items:center;border:0;background:transparent;padding:2px;cursor:pointer;font:inherit;color:inherit;min-width:190px;max-width:100%}
.kp-b{width:54px;height:54px;border-radius:50%;background:var(--k-grass);display:grid;place-items:center;box-shadow:0 3px 0 rgba(0,0,0,.14)}
.kp-b svg{width:28px;height:28px;fill:#fff}
.kp-bar{height:8px;border-radius:4px;background:var(--k-line);overflow:hidden}
.kp-bar i{display:block;height:100%;width:0;background:var(--k-grass);transition:width .2s linear}
.kp-t{font-size:14px;color:var(--k-muted)}
.k-play.on .kp-b{background:var(--k-orange)}
.k-play.new .kp-b{animation:glow 1.2s infinite}
@keyframes glow{50%{box-shadow:0 0 0 12px color-mix(in srgb,var(--k-grass) 30%,transparent)}}
.k-play.big{width:100%;min-width:0;grid-template-columns:auto minmax(80px,1fr) auto}
.k-play.big .kp-b{width:80px;height:80px} .k-play.big .kp-b svg{width:42px;height:42px}
.k-ftx{display:block;position:relative;border:0;background:transparent;padding:0;padding-inline-end:36px;text-align:start;font:inherit;color:inherit;cursor:pointer;min-width:0}
.k-ftx .k-again{top:auto;bottom:0;inset-inline-end:0;width:30px;height:30px} .k-ftx .k-again svg{width:16px;height:16px}
button.k-fstk,button.k-cpost,button.k-badge2{border:0;font:inherit;color:inherit;cursor:pointer;text-align:start}
button.k-fstk{background:transparent;padding:0}
button.k-badge2{text-align:center}
.k-qs .k-stk{width:52px;height:52px} .k-qs .k-stk svg{width:30px;height:30px}
/* questions: the same green (yes) and grey (no) pictures every time */
.k-ask{background:var(--k-card);border-radius:28px;padding:22px;max-width:480px;width:100%;display:grid;gap:16px;justify-items:center;text-align:center;box-shadow:var(--k-shadow)}
.k-ask h2{font-family:var(--f-display);font-size:24px;line-height:1.5}
.k-yesno{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.k-yesno .k-big{min-height:96px}
.k-yesno .k-big svg{width:50px;height:50px}
.k-yesno .k-big:only-child{grid-column:1/-1}
.k-big.tall{flex-direction:column;gap:6px;min-height:136px}
.k-big.tall svg{width:60px;height:60px}
.k-big.tall span{font-size:20px}
.k-big:disabled{opacity:.5}
.k-stk.huge{width:124px;height:124px;border-radius:34px}
.k-stk.huge svg{width:74px;height:74px}
.k-rem .kr-pic{width:124px;height:124px;border-radius:36px;background:var(--c,var(--k-sky));display:grid;place-items:center}
.k-rem .kr-pic svg{width:74px;height:74px;fill:#fff}
.k-rem .kr-pic.c-sun svg{fill:#3d2a00}
.k-rem .k-clock{width:66px;height:66px}
.k-rem .k-clock i{width:28px;height:28px} .k-rem .k-clock i svg{width:18px;height:18px}
.k-howto{justify-items:stretch;text-align:start}
.k-howto ol{margin:0;padding-inline-start:20px;display:grid;gap:10px;font-size:15px;line-height:1.7}
.k-howto .k-big{justify-self:center}
.k-start{display:grid;justify-items:center;gap:8px;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--k-ink);font-size:20px;font-weight:800}
.k-start svg{width:64px;height:64px;fill:#fff;background:var(--k-grass);border-radius:50%;padding:24px;box-sizing:content-box;box-shadow:0 6px 0 rgba(0,0,0,.15);animation:breath 1.8s ease-in-out infinite}
@keyframes breath{50%{transform:scale(1.07)}}
.k-cele.i-heart .k-cele-star svg,.k-cele.i-heart .k-burst i svg{fill:var(--k-berry)}
@media (max-width:420px){.ko-ic{width:64px;height:64px;border-radius:20px}.ko-ic svg{width:40px;height:40px}.k-opt{font-size:14px}.k-pic{width:74px}.kp-ic{width:62px;height:62px}.kp-ic svg{width:34px;height:34px}.k-bigmic{width:88px;height:88px}.k-bigmic.rec{width:100px;height:100px}}
@media (prefers-reduced-motion:reduce){.k-start svg,.k-bigmic.on,.k-play.new .kp-b,.k-tile.ping{animation:none!important}}
/* the chat and family screens keep the microphone and the pictures on screen; the list scrolls */
.kid-wrap[data-screen="chat"] .kid-bubble{display:none}
.kid-wrap[data-screen="chat"] .k-msgs{max-height:max(150px,calc(100dvh - 500px))}
.kid-wrap[data-screen="family"] .k-fmsgs{max-height:max(150px,calc(100dvh - 520px))}
.kid .kid-stars{color:#3d2a00}
.k-offline{display:grid;justify-items:center;gap:8px;text-align:center;padding-top:48px}
.k-offline h1{font-family:var(--f-display);font-size:30px;margin:0}
@media (max-width:520px){.kid-wrap.compact .kid-me b{display:none}}
@media (max-width:420px){.kid-hero .buddy svg{width:96px;height:96px}.kid-bubble{font-size:17px}.k-feel{grid-template-columns:repeat(4,minmax(0,1fr))}.k-face .face{width:48px;height:48px}.kid-sos{font-size:18px;padding:12px 22px}}
@media (prefers-reduced-motion:reduce){.bud-body,.bud .eye,.talking .bud .mouth,.kg-cell.wait .kg-sugar{animation:none!important}}

/* who drives the body: automatic, by hand, or the latest real readings */
.sim-ctl{display:grid;gap:10px;margin-bottom:16px}
.ctl-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.ctl-seg button{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;font-size:15px}
.ctl-seg button svg{width:18px;height:18px;fill:currentColor;flex:none}
.ctl-line{margin:0;color:var(--ink-2)}
.ctl-sec{display:grid;gap:8px;padding-top:10px;border-top:1px dashed var(--line)}
.ctl-h{font-size:14px}
.ctl-scn{max-width:420px}
.ctl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:8px}
.knob{background:var(--panel-2);border-radius:12px;padding:9px 12px;display:grid;gap:6px;min-width:0;align-content:start}
.knob .kh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13.5px;min-width:0}
.knob .kh label,.knob .kh span{min-width:0}
.knob .kh b{font-family:var(--f-mono);font-size:14px;white-space:nowrap}
.knob input[type=range]{width:100%;accent-color:var(--accent)}
.knob .seg{display:flex;background:var(--panel)}
.knob .seg button{flex:1;padding:6px 4px;min-width:0}
.knob.tgl{display:flex;align-items:center;gap:10px;font-size:13.5px}
.knob[hidden]{display:none}
.diff{border:1px solid var(--accent);background:var(--accent-soft);border-radius:12px;padding:10px 12px}
.diff ul{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:2px 18px}
.diff li{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13.5px;padding:4px 0;border-bottom:1px dashed var(--line-2);min-width:0}
.diff .dk{min-width:0}
.diff .dv{display:inline-flex;gap:6px;align-items:center;font-variant-numeric:tabular-nums;white-space:nowrap}
.diff .dv b{font-weight:600}
.diff .dv b:first-child{color:var(--muted);font-weight:500}
.diff .dv i{font-style:normal;color:var(--accent-ink)}
.diff .dv.lv-danger b:last-child{color:var(--z-sev)} .diff .dv.lv-warn b:last-child{color:var(--z-high)}
.real-card{background:var(--panel-2);border-radius:12px;padding:10px 12px}
.real-card .rv{font-family:var(--f-mono);font-size:26px;font-weight:600}
.sim-tag.real{background:var(--accent-soft);color:var(--accent-ink)}
.sim-mode-chip{display:inline-flex;align-items:center;gap:5px;border-color:var(--accent);color:var(--accent-ink)}
.sim-mode-chip svg{width:15px;height:15px;fill:currentColor}
body.simmode-manual #playBtn,body.simmode-manual #speedBtn,body.simmode-real #playBtn,body.simmode-real #speedBtn{display:none}
#ctlKnobs>.diff{grid-column:1/-1}
#ctlSpeed{flex-wrap:nowrap;max-width:100%;min-width:0;flex:0 1 auto;overflow-x:auto}
#ctlSpeed button{padding:6px 8px;white-space:nowrap}
.sim-ctl>*,#ctlAuto>.row{min-width:0}