.cr-app {
    --cr-panel: rgba(8, 24, 33, 0.94);
    --cr-line: rgba(115, 210, 225, 0.28);
    --cr-muted: #a6c2ca;
    --cr-cyan: #66e7f2;
    --cr-orange: #ffbb64;
    --cr-pink: #ff74c8;
    --cr-blue: #86b8ff;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 0 2rem;
    color: #e9f5f7;
}
.cr-app *,
.cr-app *::before,
.cr-app *::after { box-sizing: border-box; }
.cr-route-chip {
    margin: 0 0 1rem;
    color: var(--cr-cyan);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.cr-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.75fr);
    gap: 1rem;
    align-items: start;
}
.cr-stage,
.cr-controls,
.cr-readouts,
.cr-diagnostics,
.cr-notes article,
.cr-formula-note,
.cr-route-backlink {
    min-width: 0;
    border: 1px solid var(--cr-line);
    background: linear-gradient(145deg, rgba(12, 35, 47, 0.97), var(--cr-panel));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
}
.cr-stage { padding: clamp(1rem, 2.2vw, 1.5rem); }
.cr-stage__head,
.cr-card-head,
.cr-controls__head {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: flex-start;
}
.cr-stage__head h2,
.cr-card-head h2,
.cr-controls__head h2,
.cr-notes h2,
.cr-route-backlink h2 {
    margin: 0.35rem 0 0.55rem;
    color: #f3fbfc;
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    line-height: 1.2;
}
.cr-stage__head p:not(.eyebrow),
.cr-notes p,
.cr-route-backlink p {
    margin: 0;
    color: var(--cr-muted);
    line-height: 1.65;
}
.cr-state-badge,
.cr-card-badge {
    flex: 0 0 auto;
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    padding: 0.35rem 0.6rem;
    border: 1px solid rgba(102, 231, 242, 0.42);
    color: var(--cr-cyan);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}
.cr-state-badge[data-state="running"] { border-color: rgba(255, 187, 100, 0.62); color: var(--cr-orange); }
.cr-state-badge[data-state="paused"],
.cr-state-badge[data-state="blocked"] { border-color: rgba(255, 116, 200, 0.62); color: var(--cr-pink); }
.cr-canvas-frame {
    position: relative;
    margin-top: 1rem;
    overflow: hidden;
    border: 1px solid rgba(102, 231, 242, 0.26);
    background: radial-gradient(circle at 48% 42%, rgba(68, 111, 169, 0.24), transparent 56%), #050c13;
}
#crCanvas {
    display: block;
    width: 100%;
    height: auto;
    min-height: 180px;
    outline: none;
    touch-action: manipulation;
}
#crCanvas:focus-visible { box-shadow: inset 0 0 0 2px var(--cr-cyan); }
.cr-canvas-legend {
    position: absolute;
    right: 0.8rem;
    bottom: 0.7rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.8rem;
    justify-content: flex-end;
    max-width: calc(100% - 1.6rem);
    padding: 0.35rem 0.5rem;
    border: 1px solid rgba(4, 12, 17, 0.75);
    background: rgba(4, 12, 17, 0.78);
    color: #d9eef1;
    font-size: 0.72rem;
}
.cr-legend-line {
    display: inline-block;
    width: 1.1rem;
    margin-right: 0.28rem;
    vertical-align: 0.1rem;
    border-top: 2px solid var(--cr-cyan);
}
.cr-legend-line--current { border-color: var(--cr-orange); border-top-style: dashed; }
.cr-canvas-help,
.cr-live,
.cr-test-case,
.cr-validation {
    color: var(--cr-muted);
    font-size: 0.86rem;
    line-height: 1.55;
}
.cr-canvas-help { margin: 0.75rem 0 0; }
.cr-live { min-height: 1.5rem; margin: 0.85rem 0 0; color: #d9eef1; }
.cr-canvas-fallback { padding: 1.25rem; color: var(--cr-muted); line-height: 1.55; }
.cr-canvas-fallback strong { color: var(--cr-orange); }
.cr-canvas-fallback dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0.8rem 0 0;
}
.cr-canvas-fallback dl div,
.cr-metrics div,
.cr-readout-grid div {
    min-width: 0;
    padding: 0.7rem;
    border: 1px solid rgba(115, 210, 225, 0.2);
    background: rgba(2, 13, 19, 0.4);
}
.cr-canvas-fallback dt,
.cr-metrics dt,
.cr-readout-grid dt {
    color: var(--cr-muted);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cr-canvas-fallback dd,
.cr-metrics dd,
.cr-readout-grid dd {
    overflow-wrap: anywhere;
    margin: 0.22rem 0 0;
    color: #f3fbfc;
    font-size: 0.96rem;
    font-variant-numeric: tabular-nums;
}
.cr-metrics,
.cr-readout-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 1rem 0 0;
}
.cr-controls { padding: 1rem; }
.cr-controls__head { align-items: center; margin-bottom: 0.8rem; }
.cr-system-readout,
.cr-section-readout {
    color: var(--cr-cyan);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
}
.cr-chamber-status {
    margin-bottom: 0.85rem;
    padding: 0.75rem;
    border: 1px solid rgba(115, 210, 225, 0.2);
    background: rgba(2, 13, 19, 0.46);
}
.cr-chamber-status p,
.cr-controls .eyebrow { margin: 0; }
.cr-chamber-status dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0.65rem 0 0;
}
.cr-chamber-status dt { color: var(--cr-muted); font-size: 0.68rem; letter-spacing: 0.08em; }
.cr-chamber-status dd { margin: 0.2rem 0 0; color: #f3fbfc; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.cr-control-group {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(115, 210, 225, 0.16);
}
.cr-control-group__head { display: flex; gap: 0.6rem; justify-content: space-between; align-items: center; }
.cr-control-group h3,
.cr-shortcut-note h3 { margin: 0; color: #effbfc; font-size: 0.76rem; letter-spacing: 0.1em; }
.cr-segmented,
.cr-action-grid { display: grid; gap: 0.5rem; margin-top: 0.65rem; }
.cr-segmented { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cr-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cr-segmented button,
.cr-action-grid button,
.cr-diagnostics button,
.cr-output-row button {
    min-width: 0;
    min-height: 44px;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(102, 231, 242, 0.34);
    border-radius: 0;
    background: rgba(7, 26, 36, 0.92);
    color: #e9f5f7;
    cursor: pointer;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-align: center;
}
.cr-segmented button:hover,
.cr-action-grid button:hover,
.cr-diagnostics button:hover,
.cr-output-row button:hover { border-color: var(--cr-cyan); background: rgba(15, 54, 68, 0.95); }
.cr-segmented button:focus-visible,
.cr-action-grid button:focus-visible,
.cr-diagnostics button:focus-visible,
.cr-output-row button:focus-visible,
.cr-controls input:focus-visible,
.cr-report-details summary:focus-visible,
.cr-formula-note summary:focus-visible,
.cr-route-backlink a:focus-visible { outline: 2px solid var(--cr-orange); outline-offset: 2px; }
.cr-segmented button[aria-pressed="true"] { border-color: var(--cr-cyan); background: rgba(24, 91, 105, 0.82); color: #fff; }
.cr-action-grid .primary-control { border-color: rgba(255, 187, 100, 0.62); color: var(--cr-orange); }
.cr-controls input[type="range"] { display: block; width: 100%; min-height: 32px; margin: 0.5rem 0 0; accent-color: var(--cr-cyan); }
.cr-control-group label { display: flex; gap: 0.4rem; justify-content: space-between; align-items: baseline; margin-top: 0.72rem; color: #d9eef1; font-size: 0.75rem; line-height: 1.35; }
.cr-control-group output { color: var(--cr-orange); font-variant-numeric: tabular-nums; text-align: right; }
.cr-shortcut-note { margin-top: 0.9rem; padding-top: 0.85rem; border-top: 1px solid rgba(115, 210, 225, 0.16); }
.cr-shortcut-note p { margin: 0.45rem 0 0; color: var(--cr-muted); font-size: 0.8rem; line-height: 1.55; }
.cr-results { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr); gap: 1rem; margin-top: 1rem; }
.cr-readouts,
.cr-diagnostics { padding: 1rem; }
.cr-readout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cr-diagnostics .cr-test-case { margin: 0.8rem 0 0; }
.cr-table-wrap { overflow-x: auto; margin-top: 0.75rem; }
.cr-diagnostics table { width: 100%; border-collapse: collapse; font-size: 0.74rem; }
.cr-diagnostics th,
.cr-diagnostics td { padding: 0.48rem 0.4rem; border-bottom: 1px solid rgba(115, 210, 225, 0.18); text-align: left; vertical-align: top; }
.cr-diagnostics th { color: var(--cr-muted); font-size: 0.66rem; letter-spacing: 0.08em; }
.cr-result-pass { color: var(--cr-cyan); font-weight: 800; }
.cr-result-fail { color: #ff6e86; font-weight: 800; }
.cr-diagnostics > button { width: 100%; margin-top: 0.75rem; }
.cr-validation { margin: 0.8rem 0 0; color: var(--cr-cyan); }
.cr-validation.is-clamped { color: var(--cr-orange); }
.cr-validation.is-invalid { color: #ff6e86; }
.cr-output-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; margin-top: 0.65rem; }
.cr-report-details { margin-top: 0.75rem; }
.cr-report-details summary,
.cr-formula-note summary { color: var(--cr-cyan); cursor: pointer; font-size: 0.8rem; font-weight: 700; }
.cr-report-details pre { overflow: auto; max-height: 260px; margin: 0.55rem 0 0; padding: 0.7rem; border: 1px solid rgba(115, 210, 225, 0.18); background: rgba(2, 13, 19, 0.55); color: #d9eef1; font-size: 0.72rem; line-height: 1.5; white-space: pre-wrap; }
.cr-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.cr-notes article,
.cr-formula-note,
.cr-route-backlink { padding: 1rem; }
.cr-notes ul { margin: 0.65rem 0 0; padding-left: 1.2rem; color: var(--cr-muted); line-height: 1.65; }
.cr-notes li + li { margin-top: 0.35rem; }
.cr-formula-wrap { display: grid; gap: 1rem; margin-top: 1rem; }
.cr-formula-note code { color: #f7cf8c; }
.cr-formula-note p { margin: 0.6rem 0 0; color: var(--cr-muted); line-height: 1.6; }
.cr-route-backlink { margin-top: 1rem; }
.cr-route-backlink a { display: inline-flex; gap: 0.75rem; align-items: center; margin-top: 0.7rem; padding: 0.7rem 0.85rem; border: 1px solid rgba(102, 231, 242, 0.32); color: #e9f5f7; text-decoration: none; }
.cr-route-backlink a:hover { border-color: var(--cr-cyan); }
.cr-route-backlink a span { color: var(--cr-cyan); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; }
.cr-lower-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 0.45fr); gap: 1rem; margin-top: 1rem; }
.cr-lower-grid > * { min-width: 0; }
@media (max-width: 1050px) {
    .cr-layout,
    .cr-results { grid-template-columns: 1fr; }
    .cr-controls { order: -1; }
}
@media (max-width: 760px) {
    .cr-notes,
    .cr-lower-grid { grid-template-columns: 1fr; }
    .cr-notes article,
    .cr-formula-note,
    .cr-route-backlink { padding: 0.9rem; }
}
@media (max-width: 520px) {
    .cr-app { padding-bottom: 1.25rem; }
    .cr-stage,
    .cr-controls,
    .cr-readouts,
    .cr-diagnostics { padding: 0.78rem; }
    .cr-stage__head,
    .cr-card-head,
    .cr-controls__head { display: block; }
    .cr-state-badge,
    .cr-card-badge { margin-top: 0.65rem; }
    .cr-metrics,
    .cr-readout-grid,
    .cr-chamber-status dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cr-metrics div:last-child { grid-column: 1 / -1; }
    .cr-canvas-fallback dl { grid-template-columns: 1fr; }
    .cr-canvas-legend { position: static; max-width: 100%; justify-content: flex-start; border-width: 1px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cr-app *,
    .cr-app *::before,
    .cr-app *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; }
}