:root {
  --ink: #17231f;
  --muted: #6f7874;
  --paper: #f4f2eb;
  --lime: #b8ee35;
  --green: #1b593f;
  --line: #d7d9d1;
  --orange: #f26338;
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0;
  color: var(--ink);
  background: radial-gradient(circle at 100% 0%, #e2edcf 0, transparent 28rem), var(--paper);
  font-family: Manrope, Arial, sans-serif;
}
button { font: inherit; }
.laboratory { width: min(1180px, calc(100% - 48px)); margin: auto; padding: 28px 0 24px; }
.topbar { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 800; font-size: 18px; text-decoration: none; letter-spacing: -1px; }
.brand > span:last-child span { color: var(--green); }
.brand-mark { width: 28px; height: 28px; position: relative; display: flex; align-items: end; gap: 3px; padding: 5px; border-radius: 50%; background: var(--ink); }
.brand-mark i { display: block; width: 4px; background: var(--lime); border-radius: 4px; }
.brand-mark i:nth-child(1) { height: 8px; }.brand-mark i:nth-child(2) { height: 14px; }.brand-mark i:nth-child(3) { height: 18px; }
.session-status, .eyebrow, .panel-label, .zone-status, .measurement span, .attempts-header {
  text-transform: uppercase; font-family: "DM Mono", monospace; letter-spacing: .09em; font-size: 10px; font-weight: 500;
}
.session-status { color: #53615c; display: flex; align-items: center; gap: 7px; }
.session-status span { width: 7px; height: 7px; border-radius: 50%; background: #5daa64; box-shadow: 0 0 0 4px #d3ead3; }
.hero { padding: 76px 0 54px; }
.eyebrow, .panel-label { color: #64706a; margin: 0 0 13px; }
h1, h2 { font-weight: 800; letter-spacing: -.065em; line-height: .92; margin: 0; }
h1 { font-size: clamp(48px, 7.3vw, 88px); max-width: 800px; }
h1 em, h2 em { color: var(--green); font-style: normal; }
.intro { color: var(--muted); font-size: 15px; line-height: 1.7; max-width: 520px; margin: 25px 0 0; }
.lab-grid { display: grid; grid-template-columns: 208px minmax(400px, 1fr) 190px; gap: 22px; align-items: stretch; }
.info-panel, .score-panel { padding: 21px 18px; border: 1px solid var(--line); min-height: 354px; }
.protocol { list-style: none; padding: 6px 0 15px; margin: 0; }
.protocol li { display: flex; align-items: center; gap: 10px; padding: 13px 0; color: #4f5a55; font-size: 12px; border-bottom: 1px solid #dedfd9; }
.protocol li span { font: 10px "DM Mono"; color: #97a29b; }
.accuracy-note { color: var(--muted); display: flex; gap: 8px; margin-top: 14px; font-size: 10px; line-height: 1.5; }
.accuracy-note p { margin: 0; }.note-icon { font-size: 16px; color: var(--green); }
.experiment-card { overflow: hidden; background: #fff; box-shadow: 0 24px 50px #1d31251a; }
.card-header { height: 74px; padding: 18px 21px; display: flex; justify-content: space-between; align-items: center; }
.card-header .panel-label { margin: 0 0 5px; }.trial-count { margin: 0; font-size: 11px; color: #7c8581; }
.signal-indicator { display: flex; align-items: center; gap: 6px; font: 10px "DM Mono"; text-transform: uppercase; color: #929a96; }
.signal-indicator span { height: 7px; width: 7px; background: #cbd0ca; border-radius: 50%; }.signal-indicator.active { color: var(--green); }.signal-indicator.active span { background: var(--lime); box-shadow: 0 0 0 4px #e1f5af; }
.reaction-zone { border: 0; position: relative; display: block; width: 100%; height: 250px; color: #fff; cursor: pointer; overflow: hidden; transition: background .15s, color .15s; }
.reaction-zone:focus-visible { outline: 4px solid #2d7c57; outline-offset: -4px; }
.reaction-zone.state-idle { background: var(--ink); }.reaction-zone.state-waiting { background: #b34733; }.reaction-zone.state-ready { color: var(--ink); background: var(--lime); }.reaction-zone.state-false { background: #f1c349; color: var(--ink); }
.reaction-zone::before { content: ""; position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(90deg, transparent 49%, currentColor 50%, transparent 51%), linear-gradient(0deg, transparent 49%, currentColor 50%, transparent 51%); background-size: 42px 42px; }
.state-ready::after { content: ""; position: absolute; inset: 50%; width: 1px; height: 1px; box-shadow: 0 0 0 50px #d4fb6b, 0 0 0 120px #d8fa79aa, 0 0 0 210px #e2fa9d55; border-radius: 50%; animation: pulse .8s infinite; }
@keyframes pulse { 50% { transform: scale(1.12); opacity: .4; } }
.zone-content { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; }
.zone-icon { font-size: 27px; font-weight: 300; margin-bottom: 7px; }.zone-status { opacity: .72; margin-bottom: 5px; }.zone-content strong { font-size: 27px; letter-spacing: -.05em; }.zone-instruction { margin-top: 7px; font-size: 11px; opacity: .75; }
.corner { position: absolute; z-index: 2; width: 12px; height: 12px; border-color: currentColor; opacity: .45; }.corner-tl { top: 13px; left: 13px; border-top: 1px solid; border-left: 1px solid; }.corner-tr { top: 13px; right: 13px; border-top: 1px solid; border-right: 1px solid; }.corner-bl { bottom: 13px; left: 13px; border-bottom: 1px solid; border-left: 1px solid; }.corner-br { bottom: 13px; right: 13px; border-bottom: 1px solid; border-right: 1px solid; }
.card-footer { height: 76px; padding: 13px 21px; display: flex; align-items: center; gap: 19px; }.measurement { min-width: 94px; }.measurement span { display: block; color: #929a96; margin-bottom: 4px; }.measurement strong { font: 500 19px "DM Mono"; }.measurement small, .result-card small { font-size: 10px; color: #88918c; }.footer-divider { height: 35px; border-left: 1px solid #e3e5df; }
.reset-button { margin-left: auto; background: none; border: 0; color: var(--green); cursor: pointer; font-size: 11px; font-weight: 700; }
.benchmark-value { display: flex; align-items: baseline; gap: 4px; padding: 9px 0 3px; }.benchmark-value span { font: 500 36px "DM Mono"; letter-spacing: -.09em; }.benchmark-value small { color: #9ba39e; font: 10px "DM Mono"; }
.score-panel > p:not(.panel-label) { color: var(--muted); font-size: 10px; line-height: 1.65; min-height: 34px; margin: 5px 0 20px; }.scale { display: flex; height: 8px; align-items: end; gap: 3px; }.scale i { height: 100%; flex: 1; background: #d8ddd5; }.scale i:nth-child(4), .scale i:nth-child(5) { background: var(--lime); }.scale-labels { display: flex; justify-content: space-between; font: 9px "DM Mono"; color: #929a96; margin-top: 6px; }
.results { padding: 92px 0 45px; }.results-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 24px; }.results h2 { font-size: clamp(38px, 5vw, 60px); }.again-button { border: 1px solid var(--ink); padding: 12px 16px; background: transparent; color: var(--ink); font-size: 11px; font-weight: 700; cursor: pointer; }.again-button span { margin-left: 12px; font-size: 16px; }.again-button:hover { background: var(--ink); color: white; }
.result-cards { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 12px; }.result-card { min-height: 150px; padding: 20px; background: #e8eae3; }.result-card.featured { background: var(--green); color: #fff; }.result-card > span { font: 10px "DM Mono"; text-transform: uppercase; letter-spacing: .08em; opacity: .72; }.result-card strong { display: block; font: 500 45px "DM Mono"; letter-spacing: -.1em; margin: 16px 0 4px; }.result-card p { margin: 0; color: #69736d; font-size: 10px; }.featured p { color: #dcf1d8; }.featured small { color: #d4efbd; }
.attempts-panel { margin-top: 12px; padding: 20px; background: #fff; }.attempts-header, .attempt-row { display: grid; grid-template-columns: 1fr 1fr; }.attempts-header { color: #89918d; padding-bottom: 11px; border-bottom: 1px solid #e5e7e1; }.attempts-header span:last-child, .attempt-row time { text-align: right; }.attempt-row { padding: 12px 0; font-size: 12px; border-bottom: 1px solid #eef0eb; }.attempt-row:last-child { border: 0; }.attempt-row span { color: #6e7873; }.attempt-row time { font: 500 12px "DM Mono"; }
footer { border-top: 1px solid var(--line); padding-top: 20px; color: #89918d; font-size: 11px; } footer strong { color: var(--green); } footer span { color: var(--orange); margin-left: 3px; }
@media (max-width: 820px) { .lab-grid { grid-template-columns: 1fr; }.info-panel, .score-panel { min-height: auto; }.info-panel { display: none; }.score-panel { order: 3; }.hero { padding: 55px 0 42px; }.results { padding-top: 65px; } }
@media (max-width: 520px) { .laboratory { width: min(100% - 28px, 1180px); padding-top: 19px; }.session-status { font-size: 9px; }.hero { padding-top: 48px; }.intro { font-size: 13px; }.reaction-zone { height: 270px; }.result-cards { grid-template-columns: 1fr; }.results-heading { align-items: start; gap: 20px; flex-direction: column; }.again-button { width: 100%; }.card-footer { padding-inline: 15px; gap: 12px; } }