:root {
color-scheme: dark;
--bg: #09070d;
--surface: #15121c;
--raised: #201a2a;
--line: #342c40;
--fg: #fff1d6;
--muted: #c0b7c9;
--faint: #a79bad;
--purple: #c778ff;
--red: #ff8d86;
--amber: #ffc65c;
--green: #74e6a1;
--focus: #fff3ad;
}
* {
box-sizing: border-box;
}
html {
background: var(--bg);
color: var(--fg);
font:
14px/1.5 system-ui,
-apple-system,
sans-serif;
}
body {
margin: 0;
}
h1,
h2,
p,
dd {
overflow-wrap: anywhere;
}
h1 {
font-size: 1.1rem;
margin: 0;
letter-spacing: 0.04em;
}
h1 span {
font-weight: 400;
color: var(--muted);
letter-spacing: 0;
}
h2 {
font-size: 1rem;
line-height: 1.35;
margin: 0;
}
p {
margin: 0.6rem 0;
}
button,
input,
select {
font: inherit;
}
button,
select,
input[type="search"] {
border: 1px solid var(--line);
border-radius: 6px;
background: var(--raised);
color: var(--fg);
min-height: 34px;
padding: 5px 9px;
max-width: 100%;
}
button {
cursor: pointer;
}
button:hover {
border-color: var(--purple);
}
button:disabled {
opacity: 0.5;
cursor: default;
}
button[aria-pressed="true"] {
background: #392546;
border-color: var(--purple);
}
select {
cursor: pointer;
}
label {
color: var(--muted);
font-size: 0.78rem;
}
label select {
margin-left: 0.4rem;
}
input[type="range"] {
accent-color: var(--purple);
min-width: 60px;
width: 100%;
height: 30px;
}
input[type="search"] {
width: 100%;
margin-top: 5px;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
canvas:focus-visible,
summary:focus-visible,
a:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 3px;
}
.skip {
position: fixed;
top: -100px;
background: var(--focus);
color: #111;
padding: 10px;
z-index: 10;
}
.skip:focus {
top: 8px;
}
.masthead,
main,
footer {
width: min(100% - 40px, 1840px);
margin: auto;
}
.masthead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
padding: 22px 0 18px;
border-bottom: 1px solid var(--line);
}
.brand-lockup {
display: flex;
gap: 12px;
align-items: center;
}
.brand-mark {
width: 40px;
height: 40px;
flex: none;
}
.eyebrow {
font-size: 0.65rem;
letter-spacing: 0.11em;
text-transform: uppercase;
font-weight: 650;
color: var(--purple);
margin: 0 0 4px;
}
.claim {
font-size: 0.78rem;
color: var(--muted);
text-align: right;
max-width: 260px;
}
.casebar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 0 4px;
}
.status-strip {
font-size: 1rem;
font-weight: 650;
}
.status-strip::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--purple);
margin-right: 9px;
}
.status-strip.findings::before,
.status-strip.error::before {
background: var(--red);
}
.status-strip.pass::before {
background: var(--green);
}
.status-strip.refused::before {
background: var(--amber);
}
#metric-samples {
font-size: 0.8rem;
color: var(--muted);
}
.case-explanation {
color: var(--muted);
margin: 6px 0 18px;
max-width: 85ch;
}
.console {
display: grid;
grid-template-columns: 240px minmax(0, 1fr) 330px;
gap: 14px;
align-items: start;
}
.panel {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px;
min-width: 0;
}
.panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.data-chip {
display: inline-block;
font-size: 0.66rem;
color: var(--purple);
border: 1px solid var(--line);
border-radius: 20px;
padding: 3px 7px;
}
.artefact-chip {
color: var(--amber);
}
.workspace {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
min-width: 0;
}
.detail-stack {
display: grid;
gap: 12px;
min-width: 0;
}
.layer-note {
color: var(--muted);
font-size: 0.76rem;
line-height: 1.5;
}
.plot-controls {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin: 12px 0;
}
.plot-controls button,
.plot-controls select {
font-size: 0.72rem;
min-height: 30px;
}
.viewport-shell {
background: #100e16;
border-radius: 7px;
position: relative;
overflow: hidden;
}
.viewport-label {
position: absolute;
top: 8px;
left: 10px;
font-size: 0.68rem;
color: var(--muted);
pointer-events: none;
}
canvas {
display: block;
width: 100%;
}
.panel-physical canvas,
.panel-stereo canvas {
aspect-ratio: 18/11;
}
.panel-timeline,
.panel-components {
grid-column: 1/-1;
}
.panel-timeline canvas,
.panel-components canvas {
height: 145px;
margin-top: 10px;
}
.panel-timeline .panel-head label {
font-size: 0.72rem;
}
.panel-timeline select {
font-size: 0.72rem;
}
.transport {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
border-top: 1px solid var(--line);
padding-top: 10px;
}
.transport input {
flex: 1;
min-width: 100px;
}
.transport output {
font:
0.75rem ui-monospace,
monospace;
color: var(--muted);
}
.transport label {
white-space: nowrap;
}
.transport select {
font-size: 0.72rem;
}
#play {
min-width: 58px;
}
.field {
display: block;
margin: 12px 0;
}
.field select {
display: block;
width: 100%;
margin: 5px 0 0;
}
.finding-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 6px;
max-height: 590px;
overflow: auto;
}
.finding-item button {
display: block;
width: 100%;
text-align: left;
background: transparent;
padding: 11px;
border-color: transparent;
border-left: 3px solid transparent;
}
.finding-item button[aria-current="true"] {
border-color: #59416c;
border-left-color: var(--purple);
background: #2b2035;
}
.finding-item strong {
display: block;
font-size: 0.84rem;
line-height: 1.35;
}
.finding-item .meta {
display: block;
color: var(--muted);
font:
0.68rem/1.6 ui-monospace,
monospace;
margin-top: 5px;
}
.finding-item .severity {
color: var(--red);
font-size: 0.7rem;
}
.pager {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
margin-top: 12px;
}
.pager button {
font-size: 0.72rem;
padding: 4px 7px;
}
.pager output {
font-size: 0.7rem;
color: var(--muted);
}
.notice {
font-size: 0.76rem;
color: var(--amber);
}
#finding-summary {
font-size: 0.84rem;
}
#finding-meta {
font-family: ui-monospace, monospace;
}
.evidence-values {
margin: 12px 0;
}
.evidence-values div {
display: flex;
justify-content: space-between;
gap: 8px;
padding: 7px 0;
border-bottom: 1px solid var(--line);
font-size: 0.75rem;
}
.evidence-values dt {
color: var(--muted);
overflow-wrap: anywhere;
}
.evidence-values dd {
margin: 0;
font-family: ui-monospace, monospace;
text-align: right;
}
.sample-data {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
margin: 10px 0;
}
.sample-data div {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 0.75rem;
}
.sample-data dt {
color: var(--muted);
}
.sample-data dd {
margin: 0;
font-family: ui-monospace, monospace;
}
.table-scroll {
max-width: 100%;
overflow: auto;
}
table {
border-collapse: collapse;
width: 100%;
font-size: 0.7rem;
}
caption {
text-align: left;
color: var(--muted);
margin: 8px 0;
}
th,
td {
padding: 7px 4px;
text-align: right;
border-bottom: 1px solid var(--line);
font-variant-numeric: tabular-nums;
}
th:first-child {
text-align: left;
}
td {
font-family: ui-monospace, monospace;
}
th {
color: var(--muted);
font-weight: 500;
}
.changed {
color: var(--purple);
background: #2b2035;
}
.unavailable {
color: var(--muted);
}
.repair-title {
font-weight: 600;
font-size: 0.85rem;
}
.repair-data {
font-size: 0.78rem;
color: var(--muted);
}
code {
font-family: ui-monospace, monospace;
color: var(--purple);
}
details {
font-size: 0.78rem;
color: var(--muted);
}
summary {
cursor: pointer;
padding: 7px 0;
color: var(--fg);
}
.provenance {
padding: 12px 0;
margin-top: 12px;
}
#analysis-id {
font:
0.7rem ui-monospace,
monospace;
overflow-wrap: anywhere;
}
footer {
display: flex;
justify-content: space-between;
gap: 20px;
padding: 15px 0;
border-top: 1px solid var(--line);
font-size: 0.7rem;
color: var(--muted);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (min-width: 1800px) {
.console {
grid-template-columns: 270px minmax(0, 1fr) 370px;
}
.panel-physical canvas,
.panel-stereo canvas {
max-height: 330px;
}
.panel {
padding: 18px;
}
}
@media (max-width: 1350px) {
.console {
grid-template-columns: 210px minmax(0, 1fr);
}
.detail-stack {
grid-column: 1/-1;
grid-template-columns: 1fr 1fr 1fr;
}
.workspace {
min-width: 0;
}
}
@media (max-width: 900px) {
.console {
grid-template-columns: 1fr;
}
.evidence-panel {
order: 1;
}
.workspace {
order: 0;
}
.detail-stack {
order: 2;
grid-template-columns: 1fr 1fr;
}
.finding-list {
max-height: 260px;
}
.masthead {
align-items: flex-start;
}
.claim {
max-width: 180px;
}
.panel-physical canvas,
.panel-stereo canvas {
max-height: 300px;
}
}
@media (max-width: 600px) {
.workspace,
.detail-stack {
grid-template-columns: 1fr;
}
.masthead,
main,
footer {
width: calc(100% - 24px);
}
.masthead {
flex-direction: column;
gap: 8px;
padding: 14px 0;
}
.claim {
text-align: left;
max-width: none;
margin: 0;
}
.casebar {
align-items: flex-start;
}
.panel {
padding: 12px;
}
.transport input {
flex-basis: 100%;
}
.panel-timeline canvas,
.panel-components canvas {
height: 135px;
}
footer {
flex-direction: column;
gap: 5px;
}
}
@media (max-width: 480px) {
h1 {
font-size: 1rem;
}
.brand-mark {
width: 34px;
}
.plot-controls {
gap: 5px;
}
.casebar {
flex-direction: column;
gap: 4px;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
}
@media (forced-colors: active) {
.panel,
button,
select,
input,
canvas {
border: 1px solid CanvasText;
}
.finding-item button[aria-current="true"] {
outline: 2px solid Highlight;
}
.changed {
outline: 1px solid Highlight;
}
}