.cb-lab {
  --lab-accent: #9f5543;
  --lab-bg: #eef0f8;
  color: #252830;
  padding: clamp(24px, 4vw, 48px);
  background: var(--lab-bg);
  border: 1px solid rgba(205, 211, 225, .35);
  border-radius: 28px;
  box-shadow: 10px 12px 26px rgba(165,174,195,.24), -8px -8px 24px rgba(255,255,255,.85);
  overflow: hidden;
}
.cb-lab * { box-sizing: border-box; }
.cb-lab [hidden] { display: none !important; }
.cb-lab-heading { max-width: 780px; margin-bottom: 32px; }
.cb-lab-eyebrow {
  display: block;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
  color: var(--lab-accent);
  font-weight: 400;
  margin-bottom: 14px;
}
.cb-lab h3 {
  margin: 0 0 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.07;
  color: #252830;
}
.cb-lab-heading p { margin: 0; color: #62697c; font-size: 16px; line-height: 1.7; }
.cb-lab-layout { display: grid; grid-template-columns: minmax(180px, .85fr) minmax(0, 2fr); gap: clamp(24px, 4vw, 52px); }
.cb-lab-controls { min-width: 0; }
.cb-exposure-modes { display: flex; gap: 4px; padding: 5px; margin-bottom: 24px; border: 1px solid #d7dce7; border-radius: 14px; background: #e8ebf3; box-shadow: inset 2px 2px 5px rgba(154,163,183,.16), inset -2px -2px 5px rgba(255,255,255,.85); }
.cb-exposure-modes button { flex: 1; min-width: 0; min-height: 40px; padding: 8px 10px; color: #62697c; border: 1px solid transparent; border-radius: 10px; background: transparent; font: inherit; font-size: 13px; cursor: pointer; }
.cb-exposure-modes button[aria-pressed="true"] { color: var(--lab-accent); background: #f5f6fa; border-color: #dde1ec; box-shadow: 2px 3px 6px rgba(154,163,183,.23), -2px -2px 5px rgba(255,255,255,.85); font-weight: 600; }
.cb-exposure-modes button:focus-visible { outline: 3px solid var(--lab-accent); outline-offset: 3px; }
.cb-exposure-fields { min-width: 0; }
.cb-lab-control { margin-bottom: 24px; }
.cb-lab-control label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; line-height: 1.5; color: #4b5060; margin-bottom: 9px; }
.cb-lab-control label span { color: var(--lab-accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cb-lab-control select {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  background-color: #eef0f8;
  color: #252830;
  border: 1px solid #cdd3e1;
  border-radius: 12px;
  box-shadow: 3px 4px 8px rgba(154,163,183,.24), -3px -3px 8px rgba(255,255,255,.85);
  min-height: 44px;
  padding: 10px 30px 10px 12px;
  cursor: pointer;
}
.cb-lab-control input[type="range"] { appearance: none; -webkit-appearance: none; width: 100%; min-height: 34px; background: transparent; accent-color: #b3624c; cursor: pointer; margin: 0; }
.cb-lab-control input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: #b3624c; box-shadow: inset 1px 1px 2px rgba(122, 73, 64, .15); }
.cb-lab-control input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border: 1px solid #e0e3ed; border-radius: 50%; background: #fff; box-shadow: 2px 3px 6px rgba(147, 155, 174, .35); }
.cb-lab-control input[type="range"]::-moz-range-track { height: 4px; border-radius: 999px; background: #b3624c; box-shadow: inset 1px 1px 2px rgba(122, 73, 64, .15); }
.cb-lab-control input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: 1px solid #e0e3ed; border-radius: 50%; background: #fff; box-shadow: 2px 3px 6px rgba(147, 155, 174, .35); }
.cb-lab-control :is(input, select):focus-visible,
.cb-lab-reset:focus-visible { outline: 3px solid var(--lab-accent); outline-offset: 4px; }
.cb-lab-range-limits { display: flex; justify-content: space-between; color: #62697c; font-size: 11px; margin-top: 3px; }
.cb-lab-reset {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  padding: 10px 0;
  font: inherit;
  font-size: 13px;
  color: #62697c;
  cursor: pointer;
  border: 0;
  border-top: 1px solid #cdd3e1;
  background: transparent;
}
.cb-lab-reset:hover { color: var(--lab-accent); }
.cb-lab-reset span { font-size: 23px; line-height: 1; }
.cb-lab-workspace { min-width: 0; }
.cb-lab-figure { background: #151719; border: 1px solid #cdd3e1; border-radius: 16px; overflow: hidden; }
.cb-lab-figure svg { display: block; width: 100%; height: auto; font-family: inherit; }
.cb-lab-figure-label { margin: 10px 0 22px; color: #62697c; font-size: 11px; line-height: 1.6; }
.cb-exposure-timing { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid #cdd3e1; }
.cb-exposure-timing > div { min-width: 0; }
.cb-exposure-timing > div > span { display: block; color: #62697c; font-size: 11px; line-height: 1.6; margin-bottom: 5px; }
.cb-exposure-timing strong { color: #252830; font-family: Georgia,"Times New Roman",serif; font-size: clamp(29px,3vw,40px); font-weight: 400; line-height: 1.2; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.cb-exposure-timing p { color: var(--lab-accent); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 12px; line-height: 1.7; margin: 0; text-align: right; }
.cb-exposure-timing small { display: block; color: #62697c; font-family: inherit; font-size: 10px; }
.cb-lab-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; padding-bottom: 20px; border-bottom: 1px solid #cdd3e1; }
.cb-lab-metric strong { display: block; color: #252830; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -.045em; line-height: 1.2; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.cb-lab-metric span { color: #62697c; font-size: 11px; line-height: 1.5; display: block; }
.cb-lab-explanation { font-size: 15px; line-height: 1.8; color: #4b5060; margin: 20px 0 16px; }
.cb-lab-explanation b { color: var(--lab-accent); font-weight: 600; }
.cb-lab-note { color: #62697c; font-size: 13px; line-height: 1.8; margin: 0; }
.cb-lab-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 760px) {
  .cb-lab { padding: 24px; }
  .cb-lab-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cb-lab-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .cb-exposure-modes,.cb-exposure-fields { grid-column: 1 / -1; }
  .cb-exposure-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 18px; }
  .cb-lab-control { margin-bottom: 20px; }
  .cb-lab-reset { grid-column: 1 / -1; margin-top: 0; }
  .cb-lab-heading { margin-bottom: 26px; }
}
@media (max-width: 440px) {
  .cb-lab { padding: 24px 18px; border-radius: 22px; }
  .cb-lab-controls { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cb-exposure-fields { grid-template-columns: minmax(0,1fr); gap: 0; }
  .cb-exposure-timing { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
  .cb-exposure-timing p { text-align: left; }
  .cb-lab-heading p { font-size: 14px; }
  .cb-lab-metrics { grid-template-columns: minmax(0,1fr); gap: 15px; }
  .cb-lab-metric { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; align-items: center; }
  .cb-lab-metric strong { font-size: 26px; margin: 0; }
  .cb-lab-metric span { font-size: 12px; }
  .cb-lab-control label { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-lab *, .cb-lab *::before, .cb-lab *::after { animation: none !important; transition: none !important; }
}