.mcc-root {
--mcc-bg: #0a0f1e;
--mcc-panel: #0e1526;
--mcc-panel-2: #101a30;
--mcc-border: #1e2b47;
--mcc-cyan: #33e1ef;
--mcc-cyan-dim: rgba(51, 225, 239, 0.35);
--mcc-amber: #f5a623;
--mcc-amber-dim: rgba(245, 166, 35, 0.18);
--mcc-text: #e7edf7;
--mcc-muted: #7d8aa6;
--mcc-radius: 14px;
--mcc-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
--mcc-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
"Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
box-sizing: border-box;
background: var(--mcc-bg);
color: var(--mcc-text);
font-family: var(--mcc-sans);
border-radius: var(--mcc-radius);
padding: 20px;
max-width: 1040px;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
user-select: none;
}
.mcc-root *,
.mcc-root *::before,
.mcc-root *::after {
box-sizing: border-box;
}
.mcc-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 220px;
gap: 20px;
align-items: start;
}
@media (max-width: 760px) {
.mcc-grid {
grid-template-columns: minmax(0, 1fr);
}
.mcc-sidebar {
order: 3;
}
} .mcc-lede {
margin: 0 0 14px;
font-size: 13.5px;
color: var(--mcc-muted);
line-height: 1.6;
} .mcc-testzone {
position: relative;
border: 2px dashed var(--mcc-cyan-dim);
border-radius: var(--mcc-radius);
background:
radial-gradient(circle at 50% 30%, rgba(51, 225, 239, 0.07), transparent 60%),
var(--mcc-panel);
padding: 34px 20px;
min-height: 190px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
cursor: pointer;
text-align: center;
outline: none;
transition: border-color 0.15s ease, background 0.15s ease;
}
.mcc-testzone:hover {
border-color: var(--mcc-cyan);
}
.mcc-testzone.mcc-flash {
background:
radial-gradient(circle at 50% 30%, rgba(51, 225, 239, 0.18), transparent 60%),
var(--mcc-panel);
}
.mcc-testzone.mcc-flash-chatter {
border-color: var(--mcc-amber);
background:
radial-gradient(circle at 50% 30%, rgba(245, 166, 35, 0.22), transparent 60%),
var(--mcc-panel);
}
.mcc-mouse-icon {
width: 64px;
height: 64px;
display: block;
color: var(--mcc-cyan);
}
.mcc-mouse-icon .mcc-wave {
opacity: 0.55;
transition: opacity 0.15s ease;
}
.mcc-testzone.mcc-flash .mcc-mouse-icon .mcc-wave {
opacity: 1;
}
.mcc-testzone-label {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
}
.mcc-testzone-sub {
font-size: 12px;
color: var(--mcc-muted);
} .mcc-section-title {
margin: 22px 0 10px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--mcc-text);
} .mcc-counters {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.mcc-counter {
background: var(--mcc-panel);
border: 1px solid var(--mcc-border);
border-radius: 12px;
padding: 14px 16px 16px;
}
.mcc-counter-label {
font-size: 12px;
color: var(--mcc-muted);
margin-bottom: 10px;
font-weight: 600;
}
.mcc-digits {
display: flex;
gap: 6px;
}
.mcc-digit {
font-family: var(--mcc-mono);
font-size: 26px;
font-weight: 700;
width: 34px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: #060a14;
border: 1px solid var(--mcc-border);
}
.mcc-counter--clicks .mcc-digit {
color: var(--mcc-cyan);
text-shadow: 0 0 10px var(--mcc-cyan-dim);
}
.mcc-counter--chatter .mcc-digit {
color: var(--mcc-amber);
text-shadow: 0 0 10px var(--mcc-amber-dim);
} .mcc-log-wrap {
border: 1px solid var(--mcc-border);
border-radius: 12px;
overflow: hidden;
background: var(--mcc-panel);
}
.mcc-log-header,
.mcc-log-row {
display: grid;
grid-template-columns: 74px 1fr 110px;
align-items: center;
padding: 9px 14px;
font-size: 12.5px;
}
.mcc-log-header {
color: var(--mcc-muted);
font-weight: 700;
border-bottom: 1px solid var(--mcc-border);
background: var(--mcc-panel-2);
}
.mcc-log-body {
max-height: 260px;
overflow-y: auto;
}
.mcc-log-row {
border-bottom: 1px solid var(--mcc-border);
font-family: var(--mcc-mono);
color: var(--mcc-text);
}
.mcc-log-row:last-child {
border-bottom: none;
}
.mcc-log-row.mcc-row-latest {
background: rgba(51, 225, 239, 0.14);
}
.mcc-log-row.mcc-row-chatter {
background: var(--mcc-amber-dim);
}
.mcc-log-empty {
padding: 22px 14px;
text-align: center;
color: var(--mcc-muted);
font-size: 12.5px;
}
.mcc-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 700;
font-family: var(--mcc-sans);
}
.mcc-badge--ok {
color: #39d97a;
}
.mcc-badge--chatter {
color: var(--mcc-amber);
} .mcc-sidebar {
background: var(--mcc-panel);
border: 1px solid var(--mcc-border);
border-radius: var(--mcc-radius);
padding: 16px 16px 20px;
}
.mcc-sidebar-title {
font-size: 14px;
font-weight: 700;
margin: 0 0 4px;
}
.mcc-threshold-block {
text-align: center;
margin-bottom: 8px;
}
.mcc-threshold-caption {
font-size: 11px;
color: var(--mcc-muted);
margin-bottom: 14px;
}
.mcc-vslider-area {
display: flex;
justify-content: center;
align-items: stretch;
gap: 10px;
height: 260px;
margin: 6px 0 16px;
}
.mcc-vslider-ticks {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
font-family: var(--mcc-mono);
font-size: 10.5px;
color: var(--mcc-muted);
padding: 4px 0;
}
.mcc-vslider-track-wrap {
position: relative;
width: 44px;
height: 260px;
flex-shrink: 0;
}
.mcc-vslider-rail {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 4px;
transform: translateX(-50%);
background: linear-gradient(
to top,
var(--mcc-border) 0%,
var(--mcc-border) 100%
);
border-radius: 4px;
}
.mcc-vslider {
-webkit-appearance: none;
appearance: none;
position: absolute;
top: 50%;
left: 50%;
width: 260px;
height: 4px;
margin-top: -2px;
margin-left: -130px;
transform: rotate(-90deg);
background: transparent;
cursor: pointer;
}
.mcc-vslider:focus {
outline: none;
}
.mcc-vslider::-webkit-slider-runnable-track {
height: 4px;
background: transparent;
}
.mcc-vslider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--mcc-cyan);
box-shadow: 0 0 0 4px rgba(51, 225, 239, 0.25), 0 0 12px var(--mcc-cyan-dim);
margin-top: -7px;
cursor: grab;
}
.mcc-vslider::-moz-range-track {
height: 4px;
background: transparent;
border: none;
}
.mcc-vslider::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--mcc-cyan);
border: none;
box-shadow: 0 0 0 4px rgba(51, 225, 239, 0.25), 0 0 12px var(--mcc-cyan-dim);
cursor: grab;
}
.mcc-vslider-bubble {
position: absolute;
left: 50%;
transform: translate(6px, -50%);
background: #1b2740;
border: 1px solid var(--mcc-border);
color: var(--mcc-text);
font-family: var(--mcc-mono);
font-size: 12px;
font-weight: 700;
padding: 3px 8px;
border-radius: 20px;
white-space: nowrap;
pointer-events: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.mcc-reset-btn {
display: block;
width: 100%;
padding: 11px 0;
border-radius: 10px;
border: 1px solid var(--mcc-border);
background: #16213a;
color: var(--mcc-text);
font-size: 14px;
font-weight: 700;
font-family: var(--mcc-sans);
letter-spacing: 0.04em;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.mcc-reset-btn:hover {
background: #1c2a48;
border-color: var(--mcc-cyan-dim);
}
.mcc-reset-btn:active {
transform: translateY(1px);
}
.mcc-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}