:root{--ink:#16130f;--paper:#f4efe8;--ember:#e2562b;--stone:#6b635a;--sand:#e8e0d4;--green:#2e7d4f;--card:#fbf8f3;
 --pad:clamp(8px,min(1.8vw,2.4vh),24px);--gap:clamp(6px,min(1.2vw,1.6vh),16px);
 --fs:clamp(11px,min(1.15vw,1.9vh),16px);--fs-s:.78em;--r:clamp(10px,min(1.4vw,2vh),20px)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overflow:clip;overscroll-behavior:none}
body{font-family:Inter,"Helvetica Neue",Arial,sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;font-size:var(--fs)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.stage{position:fixed;inset:0;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:var(--gap);
 padding:var(--pad);padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right));
 padding-bottom:max(var(--pad),env(safe-area-inset-bottom));overflow:hidden;overflow:clip}
.top{display:flex;justify-content:space-between;align-items:center;gap:var(--gap);flex:none}
.brand{color:var(--ember);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.85em}
.sub{color:var(--stone);margin-top:.3em;font-size:1em;line-height:1.4;max-width:34em}.sub b{color:var(--ink)}
.demo{display:inline-block;margin-left:.4em;padding:.1em .6em;border-radius:99px;background:var(--sand);font-size:.75em;font-weight:600;color:var(--stone);white-space:nowrap}
.kpis{display:grid;grid-template-columns:repeat(4,auto);gap:var(--gap)}
.kpi{background:var(--card);border:1px solid var(--sand);border-radius:var(--r);padding:.6em 1.1em;min-width:8.5em}
.kpi b{display:block;font-size:1.9em;letter-spacing:-.03em;line-height:1.1}
.kpi span{color:var(--stone);font-size:.78em;font-weight:500}
.kpi i{font-style:normal;color:var(--green);font-size:.78em;font-weight:600;margin-left:.4em}
.flags{display:flex;gap:calc(var(--gap)*.8);flex-wrap:wrap;flex:none}
.flag{display:inline-flex;align-items:center;gap:.5em;padding:.35em .9em;border-radius:99px;background:#fbe9e1;color:#a73a17;font-weight:600;font-size:.82em;white-space:nowrap}
.flag::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--ember)}
.flag.ok{background:#e4f1e8;color:var(--green)}.flag.ok::before{background:var(--green)}
.tabs{display:none}
.stage.auto{cursor:none}
.cols{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.panel{min-height:0;min-width:0;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--sand);border-radius:calc(var(--r)*1.3);padding:var(--gap) calc(var(--gap)*.6) calc(var(--gap)*.6) var(--gap)}
.panel h2{font-size:1.15em;font-weight:700;letter-spacing:-.02em;margin-bottom:.5em;flex:none}
.panel h2 small{color:var(--stone);font-weight:500;font-size:.72em;margin-left:.5em}
.list{flex:1;min-height:0;overflow-y:auto;padding-right:calc(var(--gap)*.4);scrollbar-width:thin;scrollbar-color:var(--sand) transparent}
.row{display:grid;align-items:center;width:100%;gap:.8em;padding:.55em .6em;border-radius:calc(var(--r)*.7);border-bottom:1px solid var(--sand);transition:background .15s}
.row:last-child{border-bottom-color:transparent}
.row:hover{background:var(--paper)}
#apps .row{grid-template-columns:1.6em minmax(0,1fr) 5.5em 3.6em}
#people .row{grid-template-columns:1.6em minmax(0,1fr) 5.5em 4.6em}
.rank{color:var(--stone);font-weight:600;font-size:.85em}
.nm{font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:.5em;min-width:0}.nt{overflow:hidden;text-overflow:ellipsis;min-width:0}
.meta{display:block;color:var(--stone);font-size:.78em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.15em}
.num{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.num small{display:block;color:var(--stone);font-weight:500;font-size:.7em}
.tag{font-size:.68em;font-weight:700;padding:.1em .55em;border-radius:99px;white-space:nowrap;flex:none}
.tag.warn{background:#fbe9e1;color:#a73a17}.tag.bad{background:var(--ember);color:#fff}.tag.good{background:#e4f1e8;color:var(--green)}
.spark{width:100%;height:1.9em;display:block}
/* drawer */
.scrim{position:absolute;inset:0;background:rgba(22,19,15,.38);opacity:0;pointer-events:none;transition:opacity .25s}
.drawer{position:absolute;top:0;right:0;bottom:0;width:min(46em,92%);background:var(--paper);box-shadow:-10px 0 40px rgba(22,19,15,.18);
 transform:translateX(105%);transition:transform .3s cubic-bezier(.2,.8,.2,1);padding:var(--pad);display:flex;flex-direction:column;gap:var(--gap);overflow:hidden;visibility:hidden}
.open .scrim{opacity:1;pointer-events:auto}
.open .drawer{transform:none;visibility:visible}
.d-head{display:flex;align-items:flex-start;gap:var(--gap);flex:none}
.close{flex:none;width:2.4em;height:2.4em;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:1em;line-height:1}
.close:hover{background:var(--ember)}
.d-head h3{font-size:1.9em;letter-spacing:-.035em;line-height:1.05}
.d-head p{color:var(--stone);margin-top:.35em;font-size:.95em}
.d-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--gap);scrollbar-width:thin}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--gap)*.7)}
.stat{background:var(--card);border:1px solid var(--sand);border-radius:var(--r);padding:.55em .8em}
.stat b{display:block;font-size:1.45em;letter-spacing:-.03em}.stat b.g{color:var(--green)}
.stat span{color:var(--stone);font-size:.74em;font-weight:500}
.box{background:var(--card);border:1px solid var(--sand);border-radius:var(--r);padding:.8em 1em;flex:none}
.box h4{font-size:.74em;text-transform:uppercase;letter-spacing:.1em;color:var(--stone);margin-bottom:.6em;font-weight:700}
.chart{width:100%;height:clamp(70px,min(16vw,20vh),190px);display:block}
.chart text{font-size:10px;fill:#6b635a;font-family:inherit}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.bar span{white-space:nowrap}.bar{display:grid;grid-template-columns:7.5em 1fr 2.8em;gap:.6em;align-items:center;font-size:.85em;margin:.35em 0}
.bar i{display:block;height:.6em;background:var(--sand);border-radius:99px;overflow:hidden}.bar i s{display:block;height:100%;background:var(--ember);border-radius:99px}
.bar em{font-style:normal;color:var(--stone);text-align:right}
.chips{display:flex;flex-wrap:wrap;gap:.4em}
.chip{display:inline-flex;gap:.4em;align-items:center;padding:.3em .8em;border-radius:99px;background:var(--sand);font-weight:600;font-size:.85em}
button.chip:hover{background:var(--ember);color:#fff}
.note{font-size:.88em;line-height:1.45;color:var(--stone)}.note b{color:var(--ink)}
.applist{display:flex;flex-direction:column;gap:.3em}
.applist button{display:flex;justify-content:space-between;gap:1em;padding:.5em .7em;border-radius:calc(var(--r)*.6);background:var(--paper);font-weight:600}
.applist button:hover{background:var(--sand)}.applist span{color:var(--stone);font-weight:500}
/* phones portrait / narrow: tabs */
@media (max-width:760px) and (min-height:500px){
 :root{--fs:clamp(12px,3.5vw,16px)}
 .top{flex-direction:column;align-items:stretch}
 .kpis{grid-template-columns:repeat(4,1fr);gap:6px}
 .kpi{min-width:0;padding:.5em .6em}.kpi b{font-size:1.35em}.kpi span{font-size:.68em;display:block;line-height:1.2}.kpi i{display:none}
 .tabs{display:flex;flex:none;background:var(--sand);padding:3px;border-radius:99px}
 .tabs button{flex:1;text-align:center;padding:.55em;border-radius:99px;font-weight:600;color:var(--stone)}
 .tabs button[aria-selected=true]{background:var(--ink);color:var(--paper)}
 .cols{grid-template-columns:1fr}
 .cols[data-tab=apps] #panel-people,.cols[data-tab=people] #panel-apps{display:none}
 .panel h2 small{display:none}
 #apps .row{grid-template-columns:1.2em minmax(0,1fr) 3.5em 3em}
 #people .row{grid-template-columns:1.2em minmax(0,1fr) 3.5em 3.6em}
 .drawer{width:100%}
 .stats{grid-template-columns:repeat(2,1fr)}
 .two{grid-template-columns:1fr}
}
@media (max-width:760px) and (max-height:700px) and (min-height:500px){.flags{display:none}.demo{display:none}}
@media (max-height:760px) and (min-width:761px){.flags{display:none}}
@media (min-width:761px) and (max-aspect-ratio:1/1){
 :root{--fs:clamp(13px,1.6vw,20px);--gap:clamp(10px,1.6vw,22px)}
 .row{padding:.8em .6em}
}
@media (max-height:520px){
 :root{--fs:clamp(9px,2.6vh,13px);--pad:6px;--gap:5px}
 .flags,.kpi i,.demo{display:none}
 .sub{font-size:.9em;margin-top:.2em}
 .top{align-items:center}
 .kpis{grid-template-columns:repeat(4,auto)}.kpi{padding:.3em .8em;min-width:0}.kpi b{font-size:1.4em}
 .panel h2 small{display:none}.row{padding:.35em .5em}.spark{height:1.5em}
 .stats{grid-template-columns:repeat(4,1fr)}.d-head h3{font-size:1.4em}
 .drawer{width:min(60em,86%)}
 .d-body{display:grid;grid-template-columns:1fr 1fr;align-content:start}
 .d-body .stats{grid-column:1/-1}
}
.mcpchip{display:inline-block;margin-top:.5em;padding:.25em .7em;border-radius:99px;background:var(--ink);color:var(--paper);font:500 .75em ui-monospace,Menlo,monospace;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top}
.mcpchip b{color:var(--ember);font-weight:600;font-family:inherit}
.mcp{position:absolute;inset:0;display:grid;place-items:center;background:rgba(22,19,15,.5);opacity:0;pointer-events:none;transition:opacity .35s;z-index:5;padding:var(--pad)}
.mcp.show{opacity:1}
.mcp-card{width:min(34em,100%);max-height:100%;overflow:hidden;background:var(--paper);border-radius:calc(var(--r)*1.4);padding:calc(var(--gap)*1.4);display:flex;flex-direction:column;gap:.7em;box-shadow:0 20px 60px rgba(0,0,0,.3);transform:translateY(12px);transition:transform .35s}
.mcp.show .mcp-card{transform:none}
.mcp-card .kick{color:var(--ember);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.72em}
.mcp-card h5{font-size:1.5em;letter-spacing:-.03em;line-height:1.1}
.bub{padding:.6em .9em;border-radius:1.1em;font-size:.95em;line-height:1.4}
.bub.u{align-self:flex-end;background:var(--ink);color:var(--paper);border-bottom-right-radius:.3em}
.bub.a{background:var(--card);border:1px solid var(--sand);border-bottom-left-radius:.3em}
.bub.a div{display:flex;justify-content:space-between;gap:1em;padding:.15em 0}.bub.a div span{color:var(--green);font-weight:700}
.mcp-card .mcpchip{align-self:flex-start;margin:0}
.cur{position:fixed;left:0;top:0;width:clamp(18px,2.4vw,30px);aspect-ratio:1;z-index:50;pointer-events:none;opacity:0;transition:transform .9s cubic-bezier(.45,0,.2,1),opacity .3s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.cur.on{opacity:1}
.cur svg{display:block;transition:transform .12s;transform-origin:20% 10%}
.cur.press svg{transform:scale(.8)}
.cur::after{content:"";position:absolute;left:10%;top:6%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:3px solid var(--ember);opacity:0}
.cur.ping::after{animation:ping .55s ease-out}
@keyframes ping{from{opacity:.9;transform:scale(.2)}to{opacity:0;transform:scale(1.4)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}