* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--mcpui-font-body);
font-size: var(--mcpui-text-md);
line-height: var(--mcpui-leading-normal);
color: var(--mcpui-ink);
background: var(--mcpui-bg);
padding: var(--mcpui-space-5);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.container {
max-width: 100%;
display: flex;
flex-direction: column;
gap: var(--mcpui-space-4);
}
.mcp-app-title {
font-family: var(--mcpui-font-heading);
font-size: var(--mcpui-text-xl);
font-weight: 600;
line-height: var(--mcpui-leading-tight);
letter-spacing: var(--mcpui-tracking-tight);
color: var(--mcpui-ink);
}
.mcp-app-title::after {
content: "";
display: block;
width: 2.25rem;
height: 2px;
margin-top: var(--mcpui-space-2);
border-radius: var(--mcpui-radius-pill);
background: var(--mcpui-accent);
}
.mcp-app-description {
max-width: 68ch;
color: var(--mcpui-ink-dim);
font-size: var(--mcpui-text-sm);
}
.mcp-app-title + .mcp-app-description {
margin-top: calc(var(--mcpui-space-2) * -1);
}
:where(a) {
color: var(--mcpui-accent);
text-underline-offset: 0.15em;
}
:where(button, input, select, textarea) {
font-family: inherit;
font-size: inherit;
}
:where(button, a, input, select, textarea):focus-visible {
outline: 2px solid var(--mcpui-accent);
outline-offset: 2px;
}
:where(.metric-value, .list-value, .data-table td, .status-value) {
font-variant-numeric: tabular-nums;
}
.error-message {
padding: var(--mcpui-space-3) var(--mcpui-space-4);
border: 1px solid var(--mcpui-danger);
border-radius: var(--mcpui-radius-inner);
background: var(--mcpui-danger-wash);
color: var(--mcpui-ink);
}
.loading {
display: flex;
align-items: center;
justify-content: center;
padding: var(--mcpui-space-6);
color: var(--mcpui-ink-dim);
}
.skeleton {
border-radius: var(--mcpui-radius-inner);
background: linear-gradient(
90deg,
var(--mcpui-surface-sunken) 25%,
color-mix(in oklab, var(--mcpui-surface-sunken) 60%, var(--mcpui-border)) 37%,
var(--mcpui-surface-sunken) 63%
);
background-size: 400% 100%;
animation: skeleton-sweep 1.4s ease-in-out infinite;
}
@keyframes skeleton-sweep {
from { background-position: 100% 50%; }
to { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
.skeleton { animation: none; }
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}