:root {
  --bg: #ededed;
  --text: #3e3e44;
  --muted: #7b7f86;
  --button: #85c2e5;
  --button-hover: #6eb5de;
  --button-pressed: #3f8fc0;
  --danger: #ef3338;
  --success: #57b85f;
  --panel: #f8f8f8;
  --border: #d7dce2;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
  letter-spacing: 0;
}

body {
  overflow: hidden;
}

button,
input,
select {
  font: inherit;
}

#jspsych-target,
.jspsych-display-element,
.jspsych-content-wrapper,
.jspsych-content {
  width: 100%;
  height: 100%;
  margin: 0;
}

.jspsych-content {
  max-width: none;
}

.sart-stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 560px;
  background: var(--bg);
  overflow: hidden;
}

.sart-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7vh 7vw 17vh;
  text-align: center;
}

.sart-title {
  margin: 0 0 8vh;
  font-size: clamp(30px, 4.2vh, 42px);
  line-height: 1.25;
  font-weight: 700;
}

.sart-body {
  max-width: min(760px, 86vw);
  font-size: clamp(20px, 2.8vh, 28px);
  line-height: 1.75;
  font-weight: 500;
}

.sart-body p {
  margin: 0 0 0.6em;
}

.sart-hint {
  position: absolute;
  left: 50%;
  bottom: 13.5vh;
  transform: translateX(-50%);
  width: min(680px, 88vw);
  margin: 0;
  color: #9a9ca3;
  font-size: clamp(14px, 1.9vh, 18px);
  text-align: center;
}

.sart-response-button {
  position: absolute;
  left: 50%;
  bottom: 5.5vh;
  transform: translateX(-50%);
  width: min(195px, 44vw);
  height: 52px;
  border: 0;
  border-radius: 3px;
  background: var(--button);
  color: #fff;
  box-shadow: 5px 8px 0 rgba(120, 120, 120, 0.18);
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 80ms ease, transform 80ms ease, box-shadow 80ms ease;
}

.sart-response-button:hover,
.sart-response-button:focus-visible {
  background: var(--button-hover);
  outline: none;
}

.sart-response-button:active,
.sart-response-button.is-pressed {
  transform: translateX(-50%) translateY(4px) scale(0.98);
  background: var(--button-pressed);
  box-shadow: 2px 3px 0 rgba(120, 120, 120, 0.12);
}

.sart-digit {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  min-width: 1.2em;
  min-height: 1.2em;
  color: #000;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(64px, 9.2vh, 92px);
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.sart-rule-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(8vw, 84px);
  margin-bottom: 6vh;
}

.sart-rule-digit {
  color: var(--danger);
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(72px, 10vh, 100px);
  font-weight: 700;
  line-height: 1;
}

.sart-icon {
  width: clamp(76px, 12vh, 116px);
  height: clamp(76px, 12vh, 116px);
  object-fit: contain;
  border-radius: 4px;
}

.sart-rule-line {
  margin: 0.55em 0;
  font-size: clamp(25px, 3.5vh, 34px);
  font-weight: 700;
}

.sart-red {
  color: var(--danger);
}

.sart-green {
  color: var(--success);
}

.sart-examples {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr);
  gap: min(12vw, 120px);
  align-items: start;
  margin: 0 0 5vh;
}

.sart-example {
  display: grid;
  justify-items: center;
  gap: 16px;
  min-width: 0;
}

.sart-example-digit {
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(58px, 8vh, 82px);
  font-weight: 700;
  line-height: 1;
}

.sart-example-label {
  font-size: clamp(22px, 3vh, 30px);
  font-weight: 700;
}

.sart-feedback {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  width: min(780px, 88vw);
  font-size: clamp(44px, 7vh, 72px);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.sart-feedback.is-error {
  color: var(--danger);
}

.sart-form {
  width: min(680px, 88vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 0 auto;
  padding: 28px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: left;
}

.sart-form-title {
  grid-column: 1 / -1;
  margin: 0 0 10px;
  font-size: clamp(28px, 3.8vh, 38px);
  text-align: center;
}

.sart-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.sart-field label {
  color: #555961;
  font-size: 16px;
  font-weight: 700;
}

.sart-field input,
.sart-field select {
  width: 100%;
  height: 46px;
  border: 1px solid #c7cdd5;
  border-radius: 4px;
  padding: 0 12px;
  background: #fff;
  color: var(--text);
  font-size: 18px;
}

.sart-form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.sart-primary-button,
.sart-link-button,
.sart-secondary-button {
  min-width: 160px;
  min-height: 46px;
  border: 0;
  border-radius: 4px;
  padding: 0 20px;
  background: var(--button);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.sart-primary-button:hover,
.sart-link-button:hover,
.sart-secondary-button:hover {
  background: var(--button-hover);
}

.sart-secondary-button {
  background: #64748b;
}

.sart-secondary-button:hover {
  background: #52647b;
}

.sart-probe {
  width: min(780px, 88vw);
  display: grid;
  justify-items: center;
  gap: 26px;
}

.sart-probe-title {
  margin: 0;
  font-size: clamp(28px, 4vh, 40px);
  line-height: 1.35;
  font-weight: 700;
}

.sart-probe-subtitle {
  margin: 0;
  color: #62676f;
  font-size: clamp(18px, 2.4vh, 24px);
}

.sart-slider-wrap {
  width: min(680px, 86vw);
  display: grid;
  gap: 12px;
}

.sart-slider {
  width: 100%;
  accent-color: var(--button-pressed);
}

.sart-slider-labels {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  width: 100%;
  color: #4b5058;
  font-size: 18px;
  text-align: center;
}

.sart-rating-value {
  min-height: 32px;
  color: var(--button-pressed);
  font-size: 24px;
  font-weight: 700;
}

.sart-completion-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.sart-status {
  max-width: min(760px, 88vw);
  margin: 18px auto 0;
  color: #62676f;
  font-size: clamp(18px, 2.3vh, 23px);
  line-height: 1.6;
  text-align: center;
}

.sart-error {
  color: var(--danger);
}

@media (max-width: 640px) {
  .sart-stage {
    min-height: 620px;
  }

  .sart-center {
    padding: 6vh 6vw 18vh;
  }

  .sart-title {
    margin-bottom: 5vh;
  }

  .sart-form {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .sart-rule-row,
  .sart-examples {
    gap: 28px;
  }

  .sart-response-button {
    width: min(210px, 58vw);
  }
}