@font-face{font-family:"Source Serif 4";src:url("/fonts/ChazutSerif-Roman.90c54d7b.woff2") format("woff2");font-weight:400 600}
/* SK-0577 · the theme follows the Hub: the Hub stores its choice under localStorage "relay.hub.theme" and sets it as
   data-theme on the root (page/app.js applyTheme); with no choice the system decides (page/chazut.css 146-178). The
   light values are this page's own; the dark ones are copied by script from page/chazut.css (its explicit dark
   block) and page/shell.css (its one dark ground and island ladder), never typed. */
:root,[data-theme="light"]{color-scheme:light;
 --paper:#F7F6F2;--surface:#FFFFFF;--ink:#16181D;--muted:#5A6068;--hairline:#E3E1DA;--line:#8F8F84;--primary:#175E63;--ai-outline:#175E63;
 --isl-side:#EFEDE6;--isl-bub:#E7E5DD;--isl-comp:#EFEDE6;--isl-field:#FFFFFF;--isl-phone:#E7E5DD;--isl-phonebtn:#E0DED6;
 --isl-paneledge:#CFCBC0;--ok:#2E8B57;--warn:#8A5300;--sheet:var(--surface);--bar:var(--surface)}
:root[data-theme="dark"],[data-theme="dark"]{color-scheme:dark;--paper:#14130F;--surface:#24231F;--ink:#EDEAE1;--muted:#A29C90;--hairline:#36332C;--line:#726C61;--primary:#4FA9AE;--ai-outline:#4FA9AE;
 --isl-side:#1C1A16;--isl-bub:#24231F;--isl-comp:#1C1A16;--isl-field:#24231F;--isl-phone:#24231F;--isl-phonebtn:#2E2C25;--isl-paneledge:#3E3A32;
 --ok:#8CCFA0;--warn:#E2AE68;--sheet:var(--isl-side);--bar:var(--surface)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--paper:#14130F;--surface:#24231F;--ink:#EDEAE1;--muted:#A29C90;--hairline:#36332C;--line:#726C61;--primary:#4FA9AE;--ai-outline:#4FA9AE;
 --isl-side:#1C1A16;--isl-bub:#24231F;--isl-comp:#1C1A16;--isl-field:#24231F;--isl-phone:#24231F;--isl-phonebtn:#2E2C25;--isl-paneledge:#3E3A32;
 --ok:#8CCFA0;--warn:#E2AE68;--sheet:var(--isl-side);--bar:var(--surface)}}
/* SK-0577 · the Hub's grid paper (page/shell.css, «1 · grid paper»: the working canvas behind the cards, never on
   cards, menus, fields or bubbles), its tokens and its rule copied by script; here on the page's ground. */
:root{--grid-ink:color-mix(in srgb,var(--ink) 5.5%,transparent);--grid-step:34px;
 --isl-shadow:0 8px 24px color-mix(in srgb,#16181D 14%,transparent);
 --sp-1:2px;--sp-2:4px;--sp-3:6px;--sp-4:8px;--sp-5:12px;--sp-6:16px;--sp-7:20px;--sp-8:24px;--sp-9:32px;
 --t-body:17px;--t-micro:calc(var(--t-body)*.68);--t-caption:calc(var(--t-body)*.75);--t-small:calc(var(--t-body)*.82);
 --t-callout:calc(var(--t-body)*.94);--t-lead:calc(var(--t-body)*1.12);--t-title:calc(var(--t-body)*1.29);
 --serif:"Source Serif 4",Georgia,serif;--sans:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--mono:"JetBrains Mono",monospace;--ctl:44px}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;background-color:var(--paper);background-image:linear-gradient(var(--grid-ink) 1px,transparent 1px),linear-gradient(90deg,var(--grid-ink) 1px,transparent 1px);background-size:var(--grid-step) var(--grid-step);background-position:-1px -1px;color:var(--ink);font-family:var(--sans);font-size:var(--t-callout);line-height:1.5;overflow:hidden;-webkit-font-smoothing:antialiased}
.ph{position:relative;width:100%;max-width:430px;margin:0 auto;height:100vh;height:100dvh;display:flex;flex-direction:column;background:transparent}
svg.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* status bar */
.sb{height:44px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 28px;font-size:15px;font-weight:600;color:var(--ink)}
.sb.srf{background:var(--surface)}
.sb i{display:inline-block;width:25px;height:12px;border:1.2px solid var(--ink);border-radius:3.5px;position:relative;opacity:.9}
.sb i:after{content:"";position:absolute;inset:1.5px 6px 1.5px 1.5px;background:var(--ink);border-radius:1.5px}
/* hub7 phone header (a section): menu or chevron, the title; surface, hairline under */
.hubbar{flex:none;display:flex;align-items:center;gap:var(--sp-4);min-height:56px;padding:var(--sp-2) var(--sp-4);background:var(--surface);border-bottom:1px solid var(--hairline)}
.tbtn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ink);flex:none}
.chev{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--primary);flex:none}
.chev .ic{width:26px;height:26px;stroke-width:2}
.hbtitle{font-family:var(--sans);font-weight:700;font-size:var(--t-lead);flex:1;min-width:0;line-height:1.25}
/* shell.css phone island (a conversation): 66% wide, 10px down, round back, the mascot at the true centre, round search */
.island{flex:none;position:relative;display:flex;align-items:center;justify-content:space-between;width:66%;height:56px;margin:10px auto 8px;padding:0 9px;border-radius:28px;background:var(--isl-phone);box-shadow:var(--isl-shadow)}
.island .rb{width:38px;height:38px;border-radius:50%;background:var(--isl-phonebtn);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.island .rb .ic{stroke-width:2}
.isface{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:36px;height:36px;color:var(--ink);display:flex}
.isface .mface,.mf .mface{width:100%;height:100%;display:block}
.mf{flex:none;display:flex;color:var(--ink)}
/* body */
.bd{flex:1;min-height:0;overflow:hidden;padding:var(--sp-5) var(--sp-5) 0;display:flex;flex-direction:column;gap:var(--sp-4)}
.infoh{font-size:var(--t-small);font-weight:600;color:var(--muted);margin:var(--sp-4) var(--sp-2) 0}
.h2{font-weight:700;font-size:20px;line-height:1.25}
.sub{font-size:var(--t-small);color:var(--muted);line-height:1.4}
.hint{font-size:var(--t-small);color:var(--muted);line-height:1.45;padding:0 var(--sp-2)}
/* grouped lists: surface, hairline, 14px corners, hairline rows (shell.css backbone / bbindex) */
.grp{background:var(--surface);border:1px solid var(--hairline);border-radius:14px;overflow:hidden}
.gr{display:flex;align-items:center;gap:var(--sp-5);min-height:48px;padding:var(--sp-5)}
.gr+.gr{border-top:1px solid var(--hairline)}
.gr.top{align-items:flex-start}
.gr.sel{background:color-mix(in srgb,var(--primary) 8%,var(--surface))}
.gt{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-1)}
.gt b{font-weight:600;font-size:var(--t-callout);line-height:1.3}
.gt span{font-size:var(--t-small);color:var(--muted);line-height:1.4}
.ct{font-weight:600;font-size:16px;padding:var(--sp-5) var(--sp-5) 0}
.kv{display:grid;grid-template-columns:104px 1fr;gap:6px 10px;font-size:var(--t-small);line-height:1.4;padding:var(--sp-4) var(--sp-5) var(--sp-5)}
.kv dt{color:var(--muted)}
/* hub7 conversation list */
.convrow{display:flex;align-items:center;gap:var(--sp-5);min-height:76px;padding:var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-3);border-bottom:1px solid var(--hairline)}
.nodot,.newdot{flex:none;width:10px;height:10px;border-radius:50%}.newdot{background:var(--primary)}
.rowt{display:flex;flex-direction:column;gap:var(--sp-1);flex:1;min-width:0}
.rhead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4)}
.rowt b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rowt .sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rtime{flex:none;font-size:var(--t-caption);color:var(--muted)}
.av7{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--line);color:var(--paper);font-weight:600;font-size:var(--t-small)}
.av7.me .ic{width:60%;height:60%}
.av7.duo{background:none;position:relative}
.av7.duo .av7{position:absolute;width:62%;height:62%;font-size:var(--t-micro);border:2px solid var(--paper)}
.av7.duo .av7:first-child{left:0;top:0}.av7.duo .av7:last-child{right:0;bottom:0}
.av7.sm{width:28px;height:28px;font-size:var(--t-caption)}
.mav{width:44px;height:44px}
/* hub7 / shell.css conversation: bubbles only (My space style: no names, no badges) */
.chat7{flex:1;min-height:0;overflow:hidden;list-style:none;padding:var(--sp-4) var(--sp-5) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4)}
.chat7>:first-child{margin-top:auto}
.stamp7{align-self:center;font-size:var(--t-micro);color:var(--muted);padding:var(--sp-2) 0}
.msg7{display:flex;flex-direction:column;align-items:flex-start;max-width:82%}
.msg7.mine{align-self:flex-end;align-items:flex-end}
.brow{display:flex;align-items:flex-end;gap:10px;min-width:0;max-width:100%}
.bubble{min-width:0;max-width:100%;padding:var(--sp-3) var(--sp-5);border-radius:18px;background:var(--isl-bub);color:var(--ink);font-size:var(--t-body);line-height:1.4;overflow-wrap:break-word}
.msg7.theirs .bubble{border-bottom-left-radius:5px}
.msg7.mine .bubble{background:var(--primary);color:var(--paper);border-bottom-right-radius:5px}
.msg7.chazut{max-width:92%}
.msg7.chazut .bubble{min-width:min(100%,15rem);outline:1.5px solid var(--ai-outline);outline-offset:-1.5px}
.cav{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin-bottom:2px;color:var(--ink);opacity:.7}
.cav .mface{width:100%;height:100%;display:block}
.dots{display:inline-flex;gap:5px;padding:6px 2px}.dots i{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.55}
.dots i:nth-child(2){opacity:.8}.dots i:nth-child(3){opacity:.4}
/* composer: «+», the rounded field, the round arrow inside it */
.pillwrap{flex:none;display:flex;align-items:flex-end;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4) var(--sp-5);background:var(--isl-comp)}
.pill{flex:1;display:flex;align-items:center;min-width:0;padding:var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-5);border:1px solid var(--line);border-radius:22px;background:var(--isl-field);min-height:46px;gap:8px}
.pill .ph2{flex:1;color:var(--muted);font-size:16px}
.pbtn{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--muted)}
.pbtn.plus{background:var(--hairline);color:var(--ink)}
.pbtn .ic{width:22px;height:22px;stroke-width:2}
/* actions: the Hub's primary is the petrol fill, 12px corners; the quiet one is the island grey */
.foot{flex:none;padding:var(--sp-5) var(--sp-5) 30px;display:flex;flex-direction:column;gap:var(--sp-4);background:var(--paper)}
.ctrl{flex:none;display:flex;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5) 30px;background:var(--isl-comp)}
.ctrl .btn{flex:1}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border-radius:12px;font-size:var(--t-body);font-weight:600}
.btn .ic{width:20px;height:20px;stroke-width:1.8}
.btn.pri{background:var(--primary);color:var(--paper)}
.btn.sec{background:var(--isl-phonebtn);color:var(--ink)}
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:8px;font-size:var(--t-caption);font-weight:600;white-space:nowrap}
.tag.ok{background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary)}
.tag.q{background:var(--hairline);color:var(--muted)}
.rad{flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;margin-top:1px}
.on .rad{border-color:var(--primary)}.on .rad:after{content:"";width:10px;height:10px;border-radius:50%;background:var(--primary)}
.cbx{flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line);display:grid;place-items:center;margin-top:1px}
.cbx.on{background:var(--primary);border-color:var(--primary);color:var(--paper)}
.cbx .ic{width:14px;height:14px;stroke-width:2.4}
.icw{flex:none;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary)}
.icw.q{background:var(--hairline);color:var(--muted)}
.tint{padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--primary) 8%,transparent);font-size:var(--t-small);line-height:1.45}
.hero .mf{width:60px;height:60px;min-width:60px;max-width:60px;max-height:60px;overflow:hidden;contain:layout paint}
.hero{display:flex;align-items:center;gap:var(--sp-6);padding:var(--sp-4) var(--sp-2) var(--sp-2)}
/* live strip */
.live{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 var(--sp-6) var(--sp-3)}
.live .lt{display:flex;flex-direction:column;line-height:1.3}
.live .lt b{font-weight:700;font-size:var(--t-callout)}
.live .lt span{font-size:var(--t-small);color:var(--muted);display:flex;align-items:center;gap:6px}
.ldot{width:8px;height:8px;border-radius:50%;background:var(--primary);display:inline-block}
.wave{display:flex;align-items:center;gap:3px;height:24px}.wave i{display:block;width:2.5px;border-radius:2px;background:var(--primary);opacity:.85}
.spk{display:flex;gap:var(--sp-4);padding:0 var(--sp-5) var(--sp-3)}
.spk .s{flex:1;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:var(--surface);border:1px solid var(--hairline);font-size:var(--t-small);line-height:1.25}
.spk .s small{display:block;color:var(--muted);font-size:var(--t-caption)}
.spk .s b{font-weight:600}
.spk .s.on{border-color:var(--primary);outline:.5px solid var(--primary);background:color-mix(in srgb,var(--primary) 6%,var(--surface))}
.notes{margin:0 var(--sp-5) var(--sp-4);padding:10px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--hairline);font-size:var(--t-small);line-height:1.45}
.notes .nh{font-weight:600;color:var(--muted);margin-bottom:2px}
/* Copied read-only from VibesCode/founders-relay@cursor/mascot-eyes-follow-e07b page/shell.css lines 884-1148 (the mascot). */
.isface{display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:var(--ink)}
.isface .mface{width:100%;height:100%;display:block}
.hub .msg7[data-who="chazut"] .brow{display:flex;align-items:flex-end;gap:10px}
.hub .msg7[data-who="chazut"] .from.chz{margin-left:calc(36px + 10px + var(--sp-5))}
.hub .msg7[data-who="chazut"] .msgacts,.hub .msg7[data-who="chazut"] .footline.under{margin-left:calc(36px + 10px)}
.cav{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin-bottom:2px;color:var(--ink);opacity:.7}
.cav .mface{width:100%;height:100%;display:block}
.mface{overflow:visible;--m-turn:4.2s;--m-beat:2.4s;--m-life:2.4s;--m-ease:cubic-bezier(0.37, 0, 0.22, 1);--m-snap:cubic-bezier(0.42, 0.02, 0.22, 1);--m-eye:cubic-bezier(0.42, 0.02, 0.22, 1);--m-grow:1.16}
.mface .mbob{transform-box:fill-box;transform-origin:center}
.mface .mc{transform-box:fill-box;transform-origin:center;transform:rotate(80deg);transition:transform 560ms var(--m-ease), translate 560ms var(--m-ease)}
.mface .meyes{transform-box:view-box;transform-origin:0px 0px;transform:scale(1.3)}
.mface .mblink{transform-box:fill-box;transform-origin:center;transform:scaleY(1)}
.mface .meye{transform-box:fill-box;transform-origin:center;transition:transform 560ms var(--m-eye)}
.mface .mpupil{transform-box:fill-box;transform-origin:center;transition:transform 560ms var(--m-eye)}
.mface .mglass{opacity:0;transform-box:fill-box;transform-origin:center bottom;transform:translateY(-100%)}
.mface .marm{opacity:0;transform-box:view-box;transform-origin:-12.2px -7.5px;transition:opacity 0.3s var(--m-eye),transform 0.3s var(--m-eye)}
.mface .mlid,.mface .mmouth path{opacity:0;transition:opacity 220ms ease}
.mface .m-shut,.mface .m-smile,.mface .m-side{stroke-width:2.15}
.mface .m-open{stroke-width:5.6;stroke-linecap:butt}
.mface[data-mood="idle"] .mc{transform:rotate(80deg);animation:mface-tilt var(--m-beat) var(--m-snap) 2}
.mface[data-mood="idle"] .mpupil{animation:mface-idle-glance var(--m-life) linear 2}
.mface[data-mood="idle"] .m-shut{opacity:1}
.mface[data-mood="idle"] .mblink,.mface[data-mood="happy"] .mblink{animation:mface-blink var(--m-beat) var(--m-eye) 2}
.mface[data-mood="thinking"] .mc{transform:rotate(90deg);animation:mface-turn var(--m-beat) var(--m-snap) 2}
.mface[data-mood="thinking"] .meyes{transform:scale(1.3);animation:none}
.mface[data-mood="thinking"] .mpupil{animation:none;transform:translate(64.76%, 0%)}
.mface[data-mood="thinking"] .mglass{opacity:1;transform:translateY(0) scale(0.81);animation:mface-slide 0.6s var(--m-eye);transition:transform 0.3s var(--m-eye)}
.mface[data-mood="thinking"] .marm{opacity:1}
.mface[data-mood="thinking"] .m-shut{opacity:1}
.mface .mtask{opacity:0;pointer-events:none}
.mface .mtask-motion,.mface .mjaw{transform-box:fill-box;transform-origin:center}
.mface .mcell{opacity:0;transform:scale(0.72);transform-box:fill-box;transform-origin:center}
.mface[data-mood="thinking"] .meye{transition:transform 0.3s var(--m-eye)}
.mface[data-mood="thinking"] .mpupil,.mface[data-mood="thinking"] .mtask{transition:opacity 0.3s var(--m-eye)}
.mface[data-mood="thinking"][data-task="crosshair"] .mtask-cross{opacity:1}
.mface[data-mood="thinking"][data-task="crosshair"] .mtask-cross .mtask-motion{animation:mface-cross var(--m-beat) var(--m-snap) 2}
.mface[data-mood="thinking"][data-task="grid"] .mtask-grid{opacity:1;transform:scale(0.52)}
.mface[data-mood="thinking"][data-task="grid"] .mcell-1{animation:mface-cell-1 var(--m-beat) var(--m-snap) 2}
.mface[data-mood="thinking"][data-task="grid"] .mcell-2{animation:mface-cell-2 var(--m-beat) var(--m-snap) 2}
.mface[data-mood="thinking"][data-task="grid"] .mcell-3{animation:mface-cell-3 var(--m-beat) var(--m-snap) 2}
.mface[data-mood="thinking"][data-task="grid"] .mcell-4{animation:mface-cell-4 var(--m-beat) var(--m-snap) 2}
.mface[data-mood="thinking"][data-task="caliper"] .mtask-caliper{opacity:1}
.mface[data-mood="thinking"][data-task="caliper"] .mjaw-a{animation:mface-jaw-a var(--m-beat) var(--m-snap) 2}
.mface[data-mood="thinking"][data-task="caliper"] .mjaw-b{animation:mface-jaw-b var(--m-beat) var(--m-snap) 2}
.mface[data-mood="thinking"][data-pose="down"] .mc{animation:none;transform:rotate(90deg)}
.mface[data-mood="thinking"][data-pose="down"] .meyes{animation:none;transform:scale(1.3)}
.mface[data-mood="thinking"][data-pose="down"] .mpupil{animation:none;transform:translate(64.76%, 0%)}
.mface[data-mood="thinking"][data-pose="right"] .mc{animation:none;transform:rotate(0deg)}
.mface[data-mood="thinking"][data-pose="right"] .meyes{animation:none;transform:scale(1.3)}
.mface[data-mood="thinking"][data-pose="right"] .mpupil{animation:none;transform:translate(64.76%, 0%)}
.mface[data-pose] .mblink{animation:none;transform:none}
.mface[data-mood="thinking"][data-task] .mblink{animation:none}
.mface[data-mood="thinking"][data-task] .meye{transform:scale(var(--m-grow))}
.mface[data-mood="thinking"][data-task] .mpupil{opacity:0}
.mface[data-mood="thinking"][data-task] .mglass{transform:translateY(0) scale(0.81, calc(0.81 * var(--m-grow)))}
.mface[data-mood="thinking"][data-task] .marm{transform:scale(var(--m-grow))}
.mface[data-mood="happy"] .meyes{transform:scale(1.3) translate(0px, -1.674px)}
.mface[data-mood="happy"] .mc{transform:rotate(76deg);animation:mface-squash 0.96s var(--m-snap) both, mface-hop 0.96s var(--m-snap) both}
.mface[data-mood="happy"] .mpupil{transform:translate(0%, -24.16%) scale(1.6);animation:mface-lift 0.56s var(--m-eye) both}
.mface[data-mood="happy"] .m-smile{opacity:1}
.mface[data-mood="surprised"] .meyes{transform:translate(0px, 0.1755px) scale(1.417)}
.mface[data-mood="surprised"] .mc{transform:rotate(66deg);animation:mface-snap 0.56s var(--m-snap) both, mface-jolt 0.56s var(--m-snap) both}
.mface[data-mood="surprised"] .mblink{animation:mface-blink-once 0.56s var(--m-eye) both}
.mface[data-mood="surprised"] .m-open{opacity:1}
.mface[data-mood="surprised"] .mpupil{transform:translate(0%, -15.29%);animation:mface-rise 0.48s var(--m-eye) both}
.mface[data-mood="sleepy"] .mc{transform:rotate(92deg);animation:mface-droop var(--m-beat) var(--m-snap) 2, mface-breathe var(--m-beat) var(--m-snap) 2}
.mface[data-mood="sleepy"] .mblink{animation:mface-blink-sleep var(--m-beat) var(--m-eye) 2}
.mface[data-mood="sleepy"] .m-shut{opacity:1}
.mface[data-mood="sleepy"] .mlid{opacity:1}
.mface[data-mood="sleepy"] .mpupil{transform:scale(0.36);animation:mface-lower 1.12s var(--m-eye) both}
.mface[data-blink="a"][data-mood="idle"] .mblink,.mface[data-blink="a"][data-mood="thinking"] .mblink,.mface[data-blink="a"][data-mood="happy"] .mblink,.mface[data-blink="a"][data-mood="sleepy"] .mblink{animation-delay:-0.8s}
.mface[data-blink="b"][data-mood="idle"] .mblink,.mface[data-blink="b"][data-mood="thinking"] .mblink,.mface[data-blink="b"][data-mood="happy"] .mblink,.mface[data-blink="b"][data-mood="sleepy"] .mblink{animation-delay:-1.6s}
.mface[data-blink="c"][data-mood="idle"] .mblink,.mface[data-blink="c"][data-mood="thinking"] .mblink,.mface[data-blink="c"][data-mood="happy"] .mblink,.mface[data-blink="c"][data-mood="sleepy"] .mblink{animation-delay:-0.4s}
@keyframes mface-turn{
  0%{transform:rotate(90deg)}
  4.5%{transform:rotate(65.5deg)}
  9%{transform:rotate(41deg)}
  13.5%{transform:rotate(16.5deg)}
  18%,68%{transform:rotate(0deg)}
  72.5%{transform:rotate(16.5deg)}
  77%{transform:rotate(41deg)}
  81.5%{transform:rotate(65.5deg)}
  86%,100%{transform:rotate(90deg)}
}
@keyframes mface-face-turn{
  0%{transform:rotate(90deg) scale(1.3)}
  4.5%{transform:rotate(65.5deg) scale(1.3)}
  9%{transform:rotate(41deg) scale(1.3)}
  13.5%{transform:rotate(16.5deg) scale(1.3)}
  18%,68%{transform:rotate(0deg) scale(1.3)}
  72.5%{transform:rotate(16.5deg) scale(1.3)}
  77%{transform:rotate(41deg) scale(1.3)}
  81.5%{transform:rotate(65.5deg) scale(1.3)}
  86%,100%{transform:rotate(90deg) scale(1.3)}
}
@keyframes mface-cross{
  0%,22%,30%,40%,58%,100%{transform:translate(0%, 0%)}
}
@keyframes mface-cell-1{
  0%,22%{opacity:0;transform:scale(0.72)}
  28%,88%{opacity:1;transform:scale(1)}
  96%,100%{opacity:0;transform:scale(0.72)}
}
@keyframes mface-cell-2{
  0%,28%{opacity:0;transform:scale(0.72)}
  34%,88%{opacity:1;transform:scale(1)}
  96%,100%{opacity:0;transform:scale(0.72)}
}
@keyframes mface-cell-3{
  0%,34%{opacity:0;transform:scale(0.72)}
  40%,88%{opacity:1;transform:scale(1)}
  96%,100%{opacity:0;transform:scale(0.72)}
}
@keyframes mface-cell-4{
  0%,40%{opacity:0;transform:scale(0.72)}
  46%,88%{opacity:1;transform:scale(1)}
  96%,100%{opacity:0;transform:scale(0.72)}
}
@keyframes mface-jaw-a{
  0%,22%,58%,100%{transform:translateY(0%);animation-timing-function:var(--m-snap)}
  34%{transform:translateY(-140%);animation-timing-function:var(--m-snap)}
  46%{transform:translateY(0%)}
}
@keyframes mface-jaw-b{
  0%,22%,58%,100%{transform:translateY(0%);animation-timing-function:var(--m-snap)}
  34%{transform:translateY(140%);animation-timing-function:var(--m-snap)}
  46%{transform:translateY(0%)}
}
@keyframes mface-glance{
  0%,50%,100%{transform:translate(0%, 0%);animation-timing-function:linear}
  12.5%,37.5%{transform:translate(17.18%, 0%);animation-timing-function:linear}
  25%{transform:translate(24.29%, 0%);animation-timing-function:linear}
  62.5%,87.5%{transform:translate(-17.18%, 0%);animation-timing-function:linear}
  75%{transform:translate(-24.29%, 0%)}
}
@keyframes mface-blink{
  0%,40%{transform:scaleY(1);animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}
  42.2%{transform:scaleY(0.12);animation-timing-function:cubic-bezier(0.16, 0.72, 0.24, 1)}
  46.8%{transform:scaleY(1)}
  74%,86%{transform:scaleY(1);animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}
  87.8%{transform:scaleY(0.12);animation-timing-function:cubic-bezier(0.16, 0.72, 0.24, 1)}
  90.6%{transform:scaleY(1);animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}
  91.8%{transform:scaleY(0.42);animation-timing-function:cubic-bezier(0.16, 0.72, 0.24, 1)}
  95.2%,100%{transform:scaleY(1)}
}
@keyframes mface-blink-once{
  0%{transform:scaleY(1);animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}
  26%{transform:scaleY(0.12);animation-timing-function:cubic-bezier(0.16, 0.72, 0.24, 1)}
  100%{transform:scaleY(1)}
}
@keyframes mface-blink-sleep{
  0%,64%{transform:scaleY(1);animation-timing-function:cubic-bezier(0.3, 0.05, 0.3, 1)}
  74%{transform:scaleY(0.16);animation-timing-function:cubic-bezier(0.16, 0.6, 0.24, 1)}
  88%,100%{transform:scaleY(1)}
}
@keyframes mface-tilt{
  0%,64%,100%{transform:rotate(80deg)}
  76%{transform:rotate(73deg)}
  86%{transform:rotate(82deg)}
  93%{transform:rotate(80deg)}
}
@keyframes mface-idle-glance{
  0%,50%,100%{transform:translate(0%, 0%);animation-timing-function:linear}
  12.5%,37.5%{transform:translate(20.04%, 0%);animation-timing-function:linear}
  25%{transform:translate(28.33%, 0%);animation-timing-function:linear}
  62.5%,87.5%{transform:translate(-20.04%, 0%);animation-timing-function:linear}
  75%{transform:translate(-28.33%, 0%)}
}
@keyframes mface-hop{
  0%{translate:0 0}
  32%{translate:0 4.5%}
  58%{translate:0 -6.5%}
  78%{translate:0 1.2%}
  100%{translate:0 0}
}
@keyframes mface-squash{
  0%{transform:scale(1, 1) rotate(76deg)}
  32%{transform:scale(1.04, 0.95) rotate(76deg)}
  58%{transform:scale(0.98, 1.045) rotate(74deg)}
  78%{transform:scale(1.012, 0.99) rotate(77deg)}
  100%{transform:scale(1, 1) rotate(76deg)}
}
@keyframes mface-jolt{
  0%{translate:0 0}
  18%{translate:0.72% -2.7%}
  42%{translate:-0.99% 0.63%}
  64%{translate:0.50% -0.27%}
  100%{translate:0 0}
}
@keyframes mface-snap{
  0%{transform:rotate(66deg)}
  22%{transform:rotate(60deg)}
  48%{transform:rotate(72deg)}
  100%{transform:rotate(66deg)}
}
@keyframes mface-breathe{
  0%,100%{translate:0 0}
  50%{translate:0 3.4%}
}
@keyframes mface-droop{
  0%,100%{transform:rotate(90deg)}
  50%{transform:rotate(97deg)}
}
@keyframes mface-slide{
  0%{opacity:0}
  72%,100%{opacity:1}
}
@keyframes mface-aside{
  0%{transform:scale(1)}
  100%{transform:scale(0.6)}
}
@keyframes mface-lift{
  0%{transform:translate(0%, 0%) scale(1)}
  100%{transform:translate(0%, -24.16%) scale(1.6)}
}
@keyframes mface-rise{
  0%{transform:translate(0%, 0%)}
  100%{transform:translate(0%, -15.29%)}
}
@keyframes mface-lower{
  0%{transform:scale(1)}
  100%{transform:scale(0.36)}
}
/* a desktop pointer: idle pupils ease toward the cursor, inside a small box. The class is added
   only while the face is idle. Reduced motion below clears it. */
@media (hover:hover) and (pointer:fine) and (min-width:900px){
  .mface[data-mood="idle"].mtrack .mpupil{animation:none;transform:translate(var(--mx, 0%), var(--my, 0%));transition:transform 180ms var(--m-eye)}
}
@media (prefers-reduced-motion:reduce){
  .mface .mbob,.mface .mc,.mface .meyes,.mface .mblink,.mface .meye,.mface .mpupil,.mface .mglass,.mface .marm,.mface .mlid,.mface .mmouth path{animation:none;transition:none}
  .mface .mbob,.mface .mblink,.mface .meye{transform:none}
  .mface .meyes{transform:scale(1.3)}
  .mface[data-mood="happy"] .meyes{transform:scale(1.3) translate(0px, -1.674px)}
  .mface[data-mood="surprised"] .meyes{transform:translate(0px, 0.1755px) scale(1.417)}
  .mface .mglass{transform:none}
  .mface .mpupil,.mface.mtrack .mpupil,.mface[data-mood="idle"].mtrack .mpupil{transform:none}
  .mface[data-mood="idle"] .mc{transform:rotate(80deg)}
  .mface[data-mood="thinking"] .mc{transform:rotate(90deg)}
  .mface[data-mood="thinking"] .meyes{transform:scale(1.3)}
  .mface[data-mood="thinking"][data-pose="right"] .mc{transform:rotate(0deg)}
  .mface[data-mood="thinking"][data-pose="right"] .meyes{transform:scale(1.3)}
  .mface[data-mood="thinking"][data-task] .mblink{animation:none}
  .mface[data-mood="thinking"] .mpupil{transform:translate(64.76%, 0%)}
  .mface[data-mood="thinking"] .mglass{opacity:1;transform:translateY(0) scale(0.81)}
  .mface[data-mood="thinking"][data-task] .meye{transform:scale(var(--m-grow))}
  .mface[data-mood="thinking"][data-task] .mpupil{opacity:0}
  .mface[data-mood="thinking"] .marm{opacity:1;transform:none}
  .mface[data-mood="thinking"][data-task] .mglass{transform:translateY(0) scale(0.81, calc(0.81 * var(--m-grow)))}
  .mface[data-mood="thinking"][data-task] .marm{opacity:1;transform:scale(var(--m-grow))}
  .mface[data-mood="thinking"][data-task="crosshair"] .mtask-cross,.mface[data-mood="thinking"][data-task="grid"] .mtask-grid,.mface[data-mood="thinking"][data-task="caliper"] .mtask-caliper{opacity:1;transform:none}
  .mface[data-mood="thinking"][data-task="grid"] .mtask-grid{transform:scale(0.52)}
  .mface[data-mood="thinking"][data-task="grid"] .mcell{opacity:1;transform:none}
  .mface .mtask,.mface .mtask-motion,.mface .mjaw,.mface .mcell{animation:none}
  .mface[data-mood="happy"] .mc{transform:rotate(76deg)}
  .mface[data-mood="happy"] .mpupil{transform:translate(0%, -24.16%) scale(1.6)}
  .mface[data-mood="surprised"] .mc{transform:rotate(66deg)}
  .mface[data-mood="surprised"] .mpupil{transform:translate(0%, -15.29%)}
  .mface[data-mood="sleepy"] .mc{transform:rotate(92deg)}
  .mface[data-mood="sleepy"] .mpupil{transform:scale(0.36)}
  .mface[data-mood="idle"] .mc,.mface[data-mood="idle"] .mpupil,.mface[data-mood="idle"] .meyes,.mface[data-mood="idle"] .mblink,.mface[data-mood="idle"] .meye,
  .mface[data-mood="thinking"] .mc,.mface[data-mood="thinking"] .mpupil,.mface[data-mood="thinking"] .meyes,.mface[data-mood="thinking"] .mblink,.mface[data-mood="thinking"] .meye,.mface[data-mood="thinking"] .mglass,
  .mface[data-mood="happy"] .mbob,.mface[data-mood="happy"] .mc,.mface[data-mood="happy"] .meyes,.mface[data-mood="happy"] .mblink,.mface[data-mood="happy"] .mpupil,
  .mface[data-mood="surprised"] .mbob,.mface[data-mood="surprised"] .mc,.mface[data-mood="surprised"] .meyes,.mface[data-mood="surprised"] .mblink,.mface[data-mood="surprised"] .mpupil,
  .mface[data-mood="sleepy"] .mbob,.mface[data-mood="sleepy"] .mc,.mface[data-mood="sleepy"] .meyes,.mface[data-mood="sleepy"] .mblink,.mface[data-mood="sleepy"] .mpupil{animation:none}
}

button.btn,button.rb{font:inherit;border:0;cursor:pointer}
.ctrl .btn{white-space:nowrap}
.ctrl.bar{align-items:center;gap:6px;padding:10px 12px 26px;background:#fff;border-top:1px solid var(--hairline)}
.ctrl .btn.ico{width:44px;height:44px;min-height:44px;flex:none;border-radius:50%;padding:0;background:#EFEDE6;border:1px solid #E0DED6}
.tg{flex:none;height:44px;padding:0 14px;border-radius:22px;border:none;font:600 14px var(--sans);display:flex;align-items:center;gap:6px;color:#fff;cursor:pointer}
.tg .ic{width:16px;height:16px}
.ctrl .btn.ico{flex:0 0 44px;width:44px}.tg.stop{background:#B9473A}.tg.go{background:#2E8B57}#talk.tg.go[aria-pressed="true"]{background:#C0533C}.tg[disabled]{opacity:.45;filter:saturate(.5);cursor:default}
.ctrl .btn.ico{flex:0 0 52px;padding:0}.msg7.founder{align-self:flex-end;align-items:flex-end}.msg7.founder .bubble{background:var(--surface);border:1px solid var(--hairline)}.ctrl .btn.ter{flex:0 0 auto;padding:0 12px;font-size:var(--t-small)}
.wave i{transition:height .12s}
.wave.on i{animation:vwave 1s ease-in-out infinite alternate}
.wave.on i:nth-child(2n){animation-delay:.2s}.wave.on i:nth-child(3n){animation-delay:.4s}
@keyframes vwave{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
#warn{margin:0 var(--sp-5) var(--sp-4);font-size:var(--t-small);color:var(--muted)}
.sumv{position:absolute;inset:0;background:var(--paper);display:flex;flex-direction:column;z-index:5}
.sumv[hidden],[hidden]{display:none!important}
#summary-draft{white-space:pre-wrap;font:inherit;font-size:var(--t-small);padding:12px}
.lt span#status{cursor:pointer}
.chat7{overflow-y:auto}
/* Spacing pass (mock 06): cards on one line; bubble padding and gaps. */
.spk .s{flex:1 1 0;min-width:0}.spk .s>div{min-width:0}.spk .s b,.spk .s small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bubble{padding:10px 14px}
.brow{gap:12px}
.chat7{padding-bottom:var(--sp-6,20px)}
/* The chip look (the notice card's «Entendido»). SK-0613: who is speaking is the people row and its strip, below. */
button.chip{font:600 var(--t-small) var(--sans);min-height:var(--ctl);max-width:100%;padding:0 14px;border-radius:22px;border:1px solid var(--hairline);background:var(--surface);color:var(--ink);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
button.chip.on{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,var(--surface));color:var(--primary);outline:.5px solid var(--primary)}
button.chip[disabled]{opacity:.45;cursor:default}
.msg7 .from{font-size:var(--t-caption);color:var(--muted);margin:0 4px 2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tg{max-width:60vw;min-width:0}.tg span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button[disabled]{cursor:default}.ctrl .btn[disabled]{opacity:.45}
/* The microphone help: cause, steps, Reintentar. */
.mich{flex:none;margin:0 var(--sp-5) var(--sp-4)}.mich .gt{padding:var(--sp-5);gap:var(--sp-3)}
.mich .gt b{font-size:var(--t-callout)}.mich .gt span{font-size:var(--t-small);color:var(--ink)}
.msteps{margin:0;padding:0 0 0 18px;font-size:var(--t-small);line-height:1.45;color:var(--ink)}.msteps li+li{margin-top:4px}.mich .msteps li b{font-size:inherit;font-weight:600}
.mich .btn{align-self:flex-start;padding:0 18px;min-height:var(--ctl);border:0;font:600 var(--t-body) var(--sans);cursor:pointer}
/* Turn taking: the end control at the left of the bottom bar (SK-0577: a round button that opens a popover with one
   button). SK-0582 AMENDMENT 1: the cue line and the Responder chip are gone; the notice card's how-to says how
   Chazut answers. */
.live .lt{flex:1;min-width:0}
/* SK-0576: under the latest message, one faint mark says what happened to what was said: grey while audio goes out,
   green once sent, heard or answered, orange when Chazut is answering or will not answer, red when the answer failed.
   Always smaller than the message text (--t-micro beside the bubble's --t-body). Green and red are the slot's
   (.tg.go, .tg.stop); orange is the Hub's --warn (page_assets.ts). The words show only for a few seconds on a tap. */
.turnline{display:flex;align-items:center;gap:var(--sp-2);margin:2px 4px 0;font-size:var(--t-micro);line-height:1.3;color:var(--muted)}
.turnline .tk{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;margin:-6px -4px;padding:0;border:0;background:none;font:inherit;letter-spacing:-.35em;cursor:pointer;color:var(--line);opacity:.7}
.turnline.ok .tk{color:#2E8B57}.turnline.warn .tk{color:#8A5300}.turnline.bad .tk{color:#B9473A}
.turnline .tw{min-width:0;overflow-wrap:break-word}
.cue{margin:6px 20px 0;font-size:var(--t-small);line-height:1.3;color:var(--muted);overflow-wrap:break-word}
.chz{display:flex;align-items:center;align-self:flex-start;max-width:calc(100% - 40px);min-height:44px;margin:4px 20px 0;padding:0 0 0 14px;gap:0;border-radius:22px;border:1px solid var(--hairline);background:var(--surface)}
.chz:has(.chz-btn[hidden]){padding-right:14px}
.chz-state{font:600 var(--t-small) var(--sans);color:var(--ink);white-space:nowrap;padding-right:10px}
.chz-btn{min-height:44px;min-width:44px;padding:0 14px 0 12px;border:0;border-left:1px solid var(--hairline);border-radius:0 22px 22px 0;background:transparent;color:var(--primary);font:600 var(--t-small) var(--sans);white-space:nowrap;cursor:pointer}
.chz-btn:focus-visible,.island .rb.inv:focus-visible,.ish .rb:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.island .irt{display:flex;align-items:center;gap:6px}
#chazut:has(#chazut-switch[aria-pressed="false"])+.cue{display:none}
.island:has(.rb.inv:not([hidden])){width:calc(100% - 24px);max-width:330px}
.island .rb.inv{position:relative}.island .rb.inv::after{content:"";position:absolute;inset:-3px;border-radius:50%}
.island .rb.inv{border:0;font-size:0;color:var(--ink);cursor:pointer}.island .rb.inv .ic{width:20px;height:20px}
.iscrim{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.45)}
.invite-sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;width:100%;max-width:430px;max-height:85vh;max-height:85dvh;margin:0 auto;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:14px 20px calc(20px + env(safe-area-inset-bottom));background:var(--surface);color:var(--ink);border:1px solid var(--hairline);border-bottom:0;border-radius:20px 20px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.28)}
.invite-sheet[hidden],.iscrim[hidden]{display:none}
.ish{display:flex;align-items:center;justify-content:space-between;gap:8px}.ish b{font-size:var(--t-lead)}
.ish .rb{width:44px;height:44px;border:0;border-radius:50%;background:var(--isl-phonebtn);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.invite-sheet label{font-size:var(--t-small);font-weight:600}
.irow{display:flex;flex-wrap:wrap;gap:8px}
.invite-sheet input{flex:1 1 10rem;min-width:0;min-height:44px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit}
.invite-sheet .btn{min-height:44px;min-width:44px;padding:0 18px;border-radius:22px;white-space:nowrap;flex:0 0 auto}
.invite-link{display:flex;align-items:center;gap:8px;margin:0;padding:6px 6px 6px 12px;border-radius:12px;background:var(--paper);border:1px solid var(--hairline)}
.invite-link span{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;font-size:var(--t-small)}
.invite-link[hidden],.invite-error[hidden]{display:none}.invite-error{margin:0;color:var(--warn)}
.invite-list{list-style:none;margin:0;padding:0}
.invite-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:center;padding:10px 0;border-top:1px solid var(--hairline)}
.invite-list .iname{grid-column:1;font-weight:600;overflow-wrap:anywhere}
.invite-list .imeta{grid-column:1;font-size:var(--t-small);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.invite-list .irev{grid-column:2;grid-row:1 / span 2}
@media (max-width:374px){.ctrl.bar #toggle{width:44px;padding:0;justify-content:center}.ctrl.bar #toggle-label{display:none}}
.live .lt #title{display:none}
/* SK-0577 · FOCUS: who has the turn. The people (SK-0613: a row of initials), the mascot under them, the transcript under a pull-up sheet,
   one round end button with a popover of one button, all in the page's and the Hub's tokens (the mock-up approved
   2026-10-25, VOICE-FOCUS v2). The grid paper shows on the ground; cards, the sheet and the bar are surfaces. */
.ictr{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:100px;height:40px}
.ititle{font-weight:700;font-size:15px;transition:opacity .2s}
.ictr .isface{opacity:0;transition:opacity .2s}
.ph.up .ititle{opacity:0}.ph.up .ictr .isface{opacity:1}
.live{padding:4px 20px 6px;min-height:50px}
.live .lt b{font-size:var(--t-lead);line-height:1.25}
#warn{margin:0 20px 2px;font-size:12px;line-height:1.3}
.focus{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:6px 16px 56px}
.ph.card .focus{padding-bottom:12px}
.focus .mich{margin:0}
#notice{border-radius:18px}#notice .gt{gap:8px;padding:14px 16px}
#notice .gt b{font-size:var(--t-lead);font-weight:700;line-height:1.3}
#notice .gt .nhow{font-size:var(--t-caption);font-weight:700;color:var(--muted);margin-top:2px}
#notice-ok{width:100%;margin-top:4px;max-width:none}
/* SK-0613 · v5 (approved 2026-10-26): the people as ONE row of big initials with the plus between them (the plus is the
   old «Otra persona»), captions under the circles, the mascot centred in the room between the captions and the sheet.
   A flat ring marks the selected speaker (a page-colour gap, then the ring); page tokens only; flex, not offsets. */
.focus:before{content:"";flex:2 1 0}
.focus>.mich{order:-1}
.people{--cs:96px;--cw:calc(var(--cs) + 36px);flex:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:8px 24px;max-width:100%}
.people.three{--cs:64px;--cw:calc(var(--cs) + 20px);gap:8px 12px}
button.pp{flex:0 1 var(--cw);width:var(--cw);min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0;border:0;background:none;color:var(--ink);font:inherit;cursor:pointer}
.pp .ini{flex:none;width:var(--cs);height:var(--cs);border-radius:50%;display:grid;place-items:center;background:var(--muted);color:var(--paper);font:600 calc(var(--cs) * .42)/1 var(--sans)}
.pp .cap{display:flex;flex-direction:column;align-items:center;gap:1px;max-width:100%;text-align:center}
.pp .cap b{font-weight:700;font-size:17px;line-height:1.25;overflow-wrap:anywhere}
.pp .cap span,.pslot .pcap{font-size:var(--t-small);line-height:1.35;color:var(--muted)}
.pp.on .ini,.pplus.on{box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--primary)}
.pp.on .cap span,.pplus.on+.pcap{color:var(--primary);font-weight:600}
.pp.on.quiet .ini,.pplus.on.quiet{box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--line)}
.pp.on.quiet .cap span,.pplus.on.quiet+.pcap{color:var(--muted);font-weight:400}
button.pp[disabled],button.pplus[disabled]{opacity:.55;cursor:default}
.pslot{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:calc((var(--cs) - 44px) / 2);max-width:var(--cw);text-align:center}
button.pplus{box-sizing:border-box;flex:none;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--ink);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background-color .14s}
button.pplus:hover:not([disabled]){background:color-mix(in srgb,var(--ink) 5%,transparent)}
button.pplus:active:not([disabled]){background:var(--hairline)}
button.pp:focus-visible{outline:0}button.pp:focus-visible .ini,button.pplus:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.pplus .ic{width:20px;height:20px;stroke-width:1.8}
.mw{flex:3 1 0;min-height:156px;display:flex;flex-direction:column;align-items:center;justify-content:center}
@media (min-width:900px){.people{--cs:120px;--cw:calc(var(--cs) + 20px)}.focus:before{flex-grow:5}.mw{flex-grow:6}}
.ph.card .mw{display:none}
/* fix round 1: with the notice card up, the card and the people row fit above the bar (the mock's frame 1) */
.ph.card .focus{gap:8px;padding-bottom:8px}
.ph.card .focus:before{display:none}
.ph.card #notice .gt{gap:5px;padding:12px 14px}
.ph.card #notice .msteps{line-height:1.35}.ph.card #notice .msteps li+li{margin-top:2px}
.ph.card .people{--cs:48px;--cw:108px}
/* the mascot: 118 face, 16 kept free under it for the speaking pose, then the caption; the pose moves the face down
   14px by transform only and the mouth line narrows once (one 2.4s beat, never looped); reduced motion: a still pose */
.mw .mf{display:flex;color:var(--ink);margin-bottom:16px;transform:translateY(0);transition:transform .48s cubic-bezier(.37,0,.22,1)}
.mw.speak .mf{transform:translateY(14px);transition-duration:.6s}
.mw.speak .mface .m-shut{transform-box:fill-box;transform-origin:center;animation:mshut 2.4s cubic-bezier(.37,0,.22,1) 1 both}
@keyframes mshut{0%,10%{transform:scaleX(1)}50%{transform:translateY(1.4px) scaleX(.55)}100%{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.mw .mf{transition:none}.mw.speak .mface .m-shut{animation:none;transform:scaleX(.7)}}
/* round 4: the headphones while the page listens (the microphone on, not paused, not stopped); they fade in and out
   by opacity only, 360ms ease-out; under reduced motion the change is instant */
.mface .mhp{--m-out:cubic-bezier(.22,1,.36,1);opacity:0;transition:opacity 360ms var(--m-out)}
.mw.listen .mface .mhp{opacity:1}
@media (prefers-reduced-motion:reduce){.mface .mhp{transition:none}}
.mw .mface{width:118px;height:118px;display:block;color:var(--ink)}
.mcap{min-height:22px;font-size:var(--t-small);color:var(--muted);display:flex;align-items:center;gap:6px}
.mcap .dots{gap:4px;padding:0}.mcap .dots i{width:6px;height:6px;animation:vdots 1.2s ease-in-out infinite}
.mcap .dots i:nth-child(2){animation-delay:.2s}.mcap .dots i:nth-child(3){animation-delay:.4s}
@keyframes vdots{0%,100%{opacity:.25}50%{opacity:.9}}
.sheet{position:absolute;left:0;right:0;bottom:82px;height:46px;background:var(--sheet);border-radius:22px 22px 0 0;border:1px solid var(--hairline);border-bottom:0;box-shadow:0 -6px 20px rgba(22,24,29,.08);overflow:hidden;display:flex;flex-direction:column;z-index:2;transition:height .32s cubic-bezier(.22,.82,.28,1)}
.ph.up .sheet{height:calc(100% - 82px - 132px)}
.ph.card .sheet{display:none}
/* the open sheet covers the warning line under the header; its text is not left half cut behind the sheet's edge */
.ph.up #warn{visibility:hidden}
button.grip{flex:none;position:relative;height:46px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding-top:8px;border:0;background:none;font:600 var(--t-small) var(--sans);color:var(--ink);cursor:pointer}
.grip:before{content:"";position:absolute;top:8px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:var(--isl-paneledge)}
.grip .ic{width:18px;height:18px;stroke-width:2;transition:transform .3s}
.ph.up .grip .ic{transform:rotate(180deg)}
.grip .n{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--hairline);color:var(--muted);font-size:12px;font-weight:600;display:grid;place-items:center}
.sbody{flex:1;min-height:0;display:flex;flex-direction:column;border-top:1px solid var(--hairline)}
.mini{flex:none;display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--hairline);background:var(--paper)}
/* SK-0613: the open sheet's row holds the same initials and plus as a compact strip, the speaker's name and line at
   the right */
.mini .strip{--cs:44px;flex:none;display:flex;align-items:center;gap:4px;min-width:0}
button.pp.sm{flex:none;width:auto;padding:4px;gap:0}
button.pwait{font:600 var(--t-small) var(--sans);min-height:44px;padding:0 14px;border-radius:22px;border:1px solid var(--hairline);background:var(--surface);color:var(--ink);opacity:.45}
.mini .who{flex:1;min-width:0;display:flex;justify-content:flex-end;align-items:baseline;gap:6px;font-size:var(--t-small);color:var(--muted);white-space:nowrap;overflow:hidden}
.mini .who b{flex:0 1 auto;min-width:0;color:var(--primary);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.sheet .chat7{background:var(--sheet)}
.sheet .msg7.founder .bubble{background:var(--paper)}
.sheet .grp,.sheet .notes{flex:none;margin:0 12px 10px}
.ctrl.bar{position:relative;z-index:3;height:82px;justify-content:space-between;padding:10px 14px 26px;background:var(--bar)}
.ctrl .btn.ico{flex:0 0 44px;width:44px;background:var(--isl-comp);border:1px solid var(--isl-phonebtn);color:var(--ink)}
.ctrl .btn.ico .ic{width:18px;height:18px;stroke-width:2.2}
.startslot{display:flex;min-width:0}
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0}
.pscrim{position:absolute;inset:0;z-index:9;background:transparent}
.pop{position:absolute;left:10px;bottom:80px;z-index:10;width:258px;padding:8px;border-radius:16px;background:var(--bar);border:1px solid var(--hairline);box-shadow:0 10px 30px rgba(0,0,0,.28)}
.pop:after{content:"";position:absolute;left:27px;bottom:-7px;width:12px;height:12px;background:var(--bar);border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline);transform:rotate(45deg)}
.pop .endbtn{width:100%;min-height:48px;border-radius:10px;border:0;background:#B9473A;color:#fff;font:600 var(--t-body) var(--sans);cursor:pointer}
/* the faint marks take the Hub's green and orange in the dark (the light values are the line's own, above) */
.turnline.ok .tk{color:var(--ok)}.turnline.warn .tk{color:var(--warn)}

[hidden]{display:none !important}
.g{display:flex;flex-direction:column;width:100%;max-width:100%;min-height:100vh;min-height:100dvh;margin:0 auto;padding:0 16px env(safe-area-inset-bottom)}
@media (min-width:900px){.g{max-width:560px;margin:0 auto;justify-content:center;padding-top:24px;padding-bottom:32px}}
.g .island{width:auto;min-width:9.5rem;justify-content:center;margin:10px auto 8px;padding:0 20px}
.g .ictr{display:flex;align-items:center;gap:8px}
.gdot{width:8px;height:8px;border-radius:50%;background:#2E8B57;flex:none}
.gchip{align-self:center;max-width:100%;padding:8px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--hairline);font-size:var(--t-small);font-weight:600;color:var(--ink);overflow-wrap:anywhere;text-align:center}
.gmid{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px 0;text-align:center;min-height:0}
@media (min-width:900px){.gmid{flex:0 0 auto;padding:48px 0 28px;gap:12px}}
.g .mw{flex:none;min-height:0}
.g .mw .mf{margin-bottom:10px}
.g .mw .mface{width:11rem;height:11rem}
@media (min-width:900px){.g .mw .mface{width:14rem;height:14rem}}
/* AMEND-7 G10: the people row, read only: the room's tiles as spans, smaller, above a smaller mascot */
.g .gpeople{--cs:56px;--cw:calc(var(--cs) + 40px);gap:8px 16px}
.g .gpeople.three{--cs:48px;--cw:calc(var(--cs) + 36px);gap:8px 10px}
span.pp{flex:0 1 var(--cw);width:var(--cw);min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink)}
.g.hp .mw .mface{width:8rem;height:8rem}
@media (min-width:900px){.g.hp .mw .mface{width:10rem;height:10rem}}
.g .mcap{justify-content:center;min-height:24px;font:600 var(--t-body) var(--sans);color:var(--ink)}
.g .cue{margin:0;max-width:22rem;font-size:var(--t-body);line-height:1.4;color:var(--muted)}
.g .state{margin:0;font-size:var(--t-small);color:var(--muted);text-align:center;overflow-wrap:break-word}
.g .state.chz-state{font:600 var(--t-body) var(--sans);color:var(--ink);white-space:normal;padding:0}
.lead{margin:0;max-width:22rem;font-size:var(--t-body);color:var(--ink);text-align:center}
.ended{margin:0;max-width:24rem;font-size:var(--t-body);font-weight:600;color:var(--ink);text-align:center;overflow-wrap:break-word}
.gbar{display:flex;flex-direction:column;gap:10px;padding:12px 0 calc(18px + env(safe-area-inset-bottom))}
.gbar .mich{margin:0}
.gbar #notice .gt span{overflow-wrap:break-word}
button,input{font:inherit}
.g .btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.g .btn.talk:focus-visible,.g .btn.talkok:focus-visible,.g a.btn:focus-visible,.codef .btn:focus-visible,.codef input:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
.codef{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:16px}
.codef label{flex:1 1 100%;font-weight:600;font-size:var(--t-small);color:var(--ink)}
.codef input{flex:1 1 160px;min-width:0;min-height:44px;padding:8px 14px;border-radius:12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);text-transform:uppercase;letter-spacing:.12em;font-size:1.125rem}
.codef .btn{min-height:48px;padding:0 24px;border:0;border-radius:24px;background:#1F6F74;color:#fff;font-weight:600;cursor:pointer}
.g .btn.talkok{width:100%;min-height:48px;border:0;border-radius:24px;background:#1F6F74;color:#fff;font-weight:600;cursor:pointer}
.g .keyhint{display:none}@media (hover:hover) and (pointer:fine){.g .keyhint{display:block}}
.g a.btn{align-self:center;min-height:48px;padding:0 22px;border-radius:24px;background:var(--isl-phonebtn);color:var(--ink);font-weight:600;text-decoration:none}
/* AMEND-10: the Hub mockups' rules (hub-mocks-4 by way of guest-room-mock-4, sha256 7df39dbd…), copied verbatim, each selector
   prefixed .gm (the guest view; .g.dark, the home and invalid pages, take the dark tokens) */
.gm.dark,.g.dark{--paper:#14130F;--ink:#EDEAE1;--surface:#24231F;--muted:#A29C90;--hairline:#36332C;--primary:#4FA9AE;--line:#726C61;--focus:#79C7CC;
  --isl-side:#1C1A16;--isl-island:#2A2823;--isl-btn:#36332C;--isl-btnink:#EDEAE1;--isl-well:#1F1D19;--isl-bub:#24231F;
  --isl-field:#24231F;--isl-panel:#2A2823;--isl-paneledge:#3E3A32;--isl-panelsel:#36332C;--av-fill:#837D72;
  --crit:#EFA79D;--crit-bg:#3A2622;--ok:#8CCFA0;--ok-bg:#23342A;--warn:#E2AE68;--warn-bg:#3A3024;}
.gm button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.gm button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.gm svg.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gm .av{width:40px;height:40px;border-radius:50%;background:var(--av-fill);color:#fff;font:600 14px/40px var(--sans);text-align:center;flex:none;position:relative}
.gm .av.s{width:28px;height:28px;font-size:11px;line-height:28px}
.gm .av.ch{background:var(--isl-bub);display:grid;place-items:center}
.gm .stack{display:flex}
.gm .stack .av{border:2px solid var(--isl-island);margin-left:-8px}
.gm .stack .av:first-child{margin-left:0}
.gm .btn{height:40px;padding:0 16px;border-radius:999px;background:var(--isl-btn);color:var(--isl-btnink);font-weight:600;font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}
.gm .btn.pri{background:var(--primary);color:var(--paper)}
.gm .btn.crit{background:#C0533C;color:#fff}
.gm .btn svg.ic{width:18px;height:18px}
.gm .rb{width:40px;height:40px;border-radius:50%;background:var(--isl-btn);display:grid;place-items:center;color:var(--isl-btnink);flex:none}
.gm .rb svg.ic{width:19px;height:19px}
.gm .tabs{display:flex;gap:2px;background:var(--isl-well);border-radius:999px;padding:3px;margin:0 auto}
.gm .tabs span{height:32px;padding:0 13px;border-radius:999px;display:flex;align-items:center;font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap}
.gm .tabs span.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px color-mix(in srgb,#16181D 12%,transparent)}
.gm .meet{background:#0F0E0B;color:#EDEAE1;display:grid;grid-template-columns:1fr 380px;height:100%}
.gm .stage{position:relative;padding:68px 20px 150px 20px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px}
.gm .mtop{position:absolute;top:0;left:0;right:0;height:56px;display:flex;align-items:center;gap:12px;padding:0 20px}
.gm .mtop b{font-size:16px}
.gm .rec{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#EDEAE1;background:#2A2823;border-radius:999px;padding:4px 10px 4px 4px}
.gm .tile{position:relative;border-radius:16px;background:#24231F;display:grid;place-items:center;overflow:hidden;min-width:0;min-height:0}
.gm .tile .nm{position:absolute;left:12px;bottom:10px;font-size:13.5px;background:color-mix(in srgb,#000 45%,transparent);padding:3px 9px;border-radius:999px;display:flex;align-items:center;gap:6px}
.gm .tile .nm svg.ic{width:14px;height:14px}
.gm .tile .bigav{width:112px;height:112px;border-radius:50%;background:#837D72;color:#fff;font:600 38px/112px var(--sans);text-align:center}
.gm .tile.talk{box-shadow:inset 0 0 0 3px #4FA9AE}
.gm .tile.talk .bigav{box-shadow:0 0 0 6px color-mix(in srgb,#4FA9AE 35%,transparent)}
.gm .capt{position:absolute;left:50%;transform:translateX(-50%);bottom:100px;width:min(720px,90%);background:color-mix(in srgb,#000 70%,transparent);border-radius:12px;padding:8px 14px;font-size:16px;line-height:1.4;text-align:center}
.gm .capt b{color:#9FD6D9}
.gm .ctrl{position:absolute;left:50%;transform:translateX(-50%);bottom:22px;display:flex;gap:10px}
.gm .ctrl .btn.crit{height:52px;padding:0 22px}
.gm .mside{background:#1C1A16;border-left:1px solid #36332C;display:flex;flex-direction:column;padding:14px 16px;gap:10px;min-height:0}
.gm .mside .tabs{margin:0;background:#14130F}
.gm .mside .tabs span{color:#A29C90}
.gm .mside .tabs span.on{background:#36332C;color:#EDEAE1}
.gm .nt{background:#24231F;border-radius:14px;padding:10px 12px;font-size:14.5px;line-height:1.4}
.gm .panel{background:var(--surface);border-radius:16px;box-shadow:0 1px 2px color-mix(in srgb,#16181D 6%,transparent);overflow:hidden}
.gm .prow2{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--hairline)}
.gm .prow2:last-child{border-bottom:0}
.gm .prow2 .nm{font-weight:700;font-size:15.5px;line-height:1.25}
.gm .prow2 .ss{font-size:13px;color:var(--muted);line-height:1.3}
/* AMEND-10 glue (the coder's, listed in RETURN-7): the copied parts laid out in one page; the phone values are the mock's
   m-call rules (.call .ctop, .people, .p, .bigav, .mfc, .capt2, .cbar), applied to the same elements under 700 px */
html:has(.gm),body:has(.gm),body:has(main.dark){background:#0F0E0B;color-scheme:dark}
.gm{height:100vh;height:100dvh;font:16px/1.45 var(--sans);color:#EDEAE1;--isl-phonebtn:#36332C}
.g.dark{--isl-phonebtn:#36332C;color:#EDEAE1}
.gm .meet{height:100%}
.gm .stage{display:flex;flex-direction:column;padding:68px 20px 22px;gap:12px;min-height:0}
.gm .gcells{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:12px}
.gm .gcells.n1{grid-template-columns:1fr}
.gm .gcells.n5,.gm .gcells.n6{grid-template-columns:1fr 1fr 1fr}
.gm .gpeople{display:contents}
.gm .mtop .stack{margin-left:auto}
.gm .gtime{color:#A29C90;font-size:14px}
.gm .tile .nm{max-width:calc(100% - 24px)}
.gm .tile .nmt{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.gm .tile .ytag{flex:none}
.gm .gchz .mw .mf{width:110px;height:110px;margin:0}
.gm .gchz .mw .mface{width:100%;height:100%}
.gm .capt,.gm .ctrl{position:static;transform:none;margin:0 auto}
.gm .gfoot{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.gm .cue{margin:0;max-width:36rem;font-size:16px;line-height:1.4;color:#A29C90}
.gm .state{margin:0;font-size:14px;color:#A29C90}
.gm .ended{margin:0;font-size:18px;font-weight:600;color:#EDEAE1}
.gm .gnotice{max-width:36rem;display:flex;flex-direction:column;gap:8px;text-align:left;font-size:16px}
.gm .btn.talkok{height:48px;background:#4FA9AE;color:#14130F}
.gm .ctrl{align-items:center;gap:14px}
.gm .ctrl .btn.hold{height:64px;padding:0 24px 0 18px;background:#36332C;color:#EDEAE1;font-size:17px;touch-action:none;user-select:none;-webkit-user-select:none}
.gm .ctrl .btn.hold.held{background:#C0533C;color:#fff}
.gm .hint{font-size:14px;color:#A29C90;max-width:280px;line-height:1.3}
.gm .keyhint{display:none}@media (hover:hover) and (pointer:fine){.gm .keyhint{display:block}}
.gm a.btn{height:48px;padding:0 22px;text-decoration:none}
.gm .btn:focus-visible,.gm a.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.gm .mside .panel{background:#24231F;box-shadow:none}
.gm .mside .prow2{border-bottom:1px solid #36332C}
.gm .mside .prow2 .ss{color:#A29C90}
@media (max-width:699px){
.gm .meet{grid-template-columns:1fr;background:linear-gradient(#1F2A2A,#0F0E0B 60%)}
.gm .mside{display:none}
.gm .stage{padding:0 14px calc(20px + env(safe-area-inset-bottom));gap:10px}
.gm .mtop{position:static;height:auto;flex-direction:column;gap:2px;padding:28px 0 0;text-align:center}
.gm .mtop b{font-size:21px}
.gm .mtop .stack{display:none}
.gm .gcells{flex:0 0 auto;grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:22px 10px;padding:18px 16px 0;justify-items:center}
.gm .gcells.n1{grid-template-columns:1fr}
.gm .tile{background:none;overflow:visible;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;max-width:100%}
.gm .tile.talk{box-shadow:none}
.gm .tile .bigav{width:104px;height:104px;font:600 34px/104px var(--sans)}
.gm .tile.talk .bigav{box-shadow:0 0 0 4px #4FA9AE,0 0 0 10px color-mix(in srgb,#4FA9AE 30%,transparent)}
.gm .tile .nm{position:static;background:none;padding:0;font-size:16px;max-width:100%}
.gm .gchz .mw{width:104px;height:104px;border-radius:50%;background:#2A2823;display:grid;place-items:center}
.gm .gchz .mw .mf{width:70px;height:70px}
.gm .gchz.talk .mw{box-shadow:0 0 0 4px #4FA9AE,0 0 0 10px color-mix(in srgb,#4FA9AE 30%,transparent)}
.gm .capt{margin:8px 4px 0;width:auto;background:color-mix(in srgb,#000 50%,transparent);border-radius:14px;padding:10px 14px;font-size:16px;line-height:1.4}
.gm .ctrl{margin-top:auto;width:100%;min-height:80px;padding:8px 14px;border-radius:28px;background:#24231F;justify-content:space-around}
.gm .ctrl .btn.crit{flex-direction:column;height:auto;padding:0;gap:4px;background:none;color:#EDEAE1;font-size:14px}
.gm .ctrl .btn.crit svg.ic{width:54px;height:54px;padding:15px;border-radius:50%;background:#C0533C;color:#fff}
}
/* AMEND-10 floor (stills-mock4 first run): text 16 px, the chip a 14 px label; the phone column held to the screen */
.gm .btn,.gm a.btn{font-size:16px}
.gm .mtop .rec{font-size:14px}
.gm .tile .nm{font-size:16px}
.gm .mside .tabs span{font-size:16px}
.gm .state{font-size:16px}
.gm .gchz .mw{flex:none;min-height:0}
.gm .ctrl:not(:has(button:not([hidden]))){display:none}
@media (min-width:700px){.gm .ctrl{background:none;box-shadow:none;border:0}}
@media (max-width:699px){.gm .meet{grid-template-columns:minmax(0,1fr)}.gm .keyhint{display:none}.gm .ctrl .btn.hold{font-size:16px}}