/* Handoff's look for the experiments engine's pages (its markup uses the st- classes): cream cards on the night gradient, like traffic. */
.st-back { margin: 22px 0 0; }
.st-link { color: #bdd4c6; }
.st-table .st-link, .st-version .st-link { color: #35574a; }
.st-section { margin: 38px 0 6px; font: 400 22px 'Newsreader', Georgia, serif; color: #cfe0d6; letter-spacing: -.02em; }
.st-note, .st-empty { margin: 4px 0 12px; font-size: 13px; line-height: 1.6; color: #9dbaae; max-width: 70ch; }
.st-decided { padding: 12px 16px; border-radius: 12px; background: rgba(207, 227, 214, .14); color: #d9eadf; }

.st-stats { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0 0; }
.st-stat { flex: 1 1 140px; background: #f8f7f1; color: #202c32; border-radius: 14px; padding: 18px 22px; display: flex; flex-direction: column; gap: 6px; }
.st-stat-label { font: 9px 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #7f8a8b; }
.st-stat-value { font: 400 30px/1 'Newsreader', Georgia, serif; letter-spacing: -.02em; }
.st-stat-value.st-small { font: 500 14px/1.3 'DM Sans', sans-serif; letter-spacing: 0; }

.st-table-wrap { background: #f8f7f1; color: #202c32; border-radius: 14px; padding: 6px 12px; overflow-x: auto; margin-top: 10px; }
.st-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.st-table th, .st-table td { padding: 12px 10px; text-align: left; border-bottom: 1px solid #e9e8e1; vertical-align: top; font-weight: 400; }
.st-table thead th { font: 9px 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #7f8a8b; }
.st-table tbody tr:last-child th, .st-table tbody tr:last-child td { border-bottom: 0; }
.st-table tbody th { font-weight: 500; }
.st-table small, .st-hint { color: #7f8a8b; }
.st-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.st-input { width: 4.5rem; min-height: 38px; padding: 0 8px; border-radius: 9px; border: 1px solid #cdd8cc; background: #fff; color: #202c32; font: 500 13px 'DM Sans', sans-serif; text-align: right; }
.st-input:focus-visible, .st-select:focus-visible { outline: 2px solid #72a99c; outline-offset: 2px; }

.st-state { display: inline-block; font: 9px 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: #eae9e1; color: #6f7b78; }
.st-state-running { background: #dbe8dc; color: #3b6153; }
.st-state-paused { background: #f3e6c8; color: #7a5a1b; }
.st-state-ended { background: #e1e6ee; color: #3f4f68; }
.st-verdict { font-weight: 500; }
.st-verdict-better { color: #2f6b4f; }
.st-verdict-worse { color: #a2483a; }
.st-verdict-too_early, .st-verdict-none, .st-verdict-no_clear_difference { color: #6f7b78; }

.st-guide { list-style: none; margin: 10px 0 0; padding: 16px 20px; background: #f8f7f1; color: #35574a; border-radius: 14px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.6; }
.st-controls { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; margin-top: 10px; }
.st-button-form, .st-form { display: contents; }
.st-ending { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-label { font-size: 13px; color: #cfe0d6; }
.st-select { min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid #cdd8cc; background: #f8f7f1; color: #202c32; font: 500 13px 'DM Sans', sans-serif; }
.st-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 12px; border: 1px solid #253e3c; background: #253e3c; color: #eaf2eb; font: 500 13px 'DM Sans', sans-serif; cursor: pointer; }
.st-button:hover { background: #365852; }
.st-button[disabled] { opacity: .45; cursor: not-allowed; }
.st-danger { background: #8d3f35; border-color: #8d3f35; }
.st-danger:hover { background: #a2483a; }
.st-button:focus-visible { outline: 2px solid #72a99c; outline-offset: 2px; }
.st-actions { margin: 8px 0 0; }
.st-header { display: none; }