:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  /* Exam panels use light backgrounds, regardless of device appearance. */
  color-scheme: only light;
  color: #213547;
  background-color: #ffffff;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root {
  width: 100%;
  min-width: 0;
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}
a:hover {
  color: #747bff;
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  color: inherit;
  background-color: #f9f9f9;
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  border-color: #646cff;
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}



.circle-text-layout.right {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 16px;
  align-items: start;
}

.circle-text-layout.below {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.circle-text-line {
  font-size: 1rem;
  line-height: 1.6;
}

.circle-choice {
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;

  font-weight: 600; /* ← bold choices */
}

.circle-choice.selected {
  border: 2px solid #333;
}

.circle-choice.correct {
  border-color: #2e7d32;
  background: #e8f5e9;
}

.circle-choice.wrong {
  border-color: #c62828;
  background: #fdecea;
}

.circle-text-image {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.stimulus-circle-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@font-face {
	font-family: "myFirstFont";
	src: url('/fonts/theory.ttf');
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
	font-family: "myFirstFont";
	src: url('/fonts/theory.ttf');
  }
}@font-face {
  font-family: 'TheoryRomanNumerals';
  src: url('/assets/RomanNumerals-DWUSl8fb.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.editor-prompt-section .editor-prompt-font { display: grid; gap: 4px; margin: 6px 0; }
.editor-prompt-section .editor-prompt-font select { max-width: 100%; }
.editor-prompt-section .editor-prompt-font small { display: block; margin-top: 4px; }
@font-face {
  font-family: 'TheoryRomanNumerals';
  src: url('/assets/RomanNumerals-DWUSl8fb.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}
.rn-score { position: relative; min-width: 600px; background: white; color: #111; }
.rn-score svg { overflow: visible; }
.rn-field { position: absolute; transform: translateX(-50%); width: 84px; text-align: center; }
.rn-field input, .rn-font { font-family: 'TheoryRomanNumerals', serif; font-size: 25px; font-weight: normal; }
.rn-field input { box-sizing: border-box; width: 100%; height: 42px; padding: 3px; border: 1px solid #687387; border-radius: 4px; background: white; color: #111; text-align: center; }
.rn-field small { display: block; font: 12px system-ui; color: #111; background: #fff; }
.rn-field input[aria-invalid='true'] { border: 2px solid #b91c1c; background: #fef2f2; }
.rn-field select { box-sizing:border-box; width:100%; height:42px; padding:3px; border:1px solid #687387; border-radius:4px; background:white; color:#111; font:18px system-ui; }
.rn-field select[aria-invalid='true'] { border:2px solid #b91c1c; background:#fef2f2; }
.rn-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.rn-candidate { position: absolute; transform: translate(-50%, -50%); width: 22px; height: 22px; border: 1px solid #2563eb; border-radius: 50%; background: #dbeafe; cursor: pointer; color: #111; padding: 0; }
.rn-candidate[aria-pressed='true'] { background: #2563eb; color: white; }
.rn-guide { font: 13px system-ui; margin: 8px 0; }

.rn-cadence-region { position:absolute; box-sizing:border-box; border:2px solid #222; pointer-events:none; }
.rn-cadence-region > span { position:absolute; top:3px; left:50%; transform:translateX(-50%); padding:0 5px; background:white; color:#111; font:bold 16px system-ui; }
.score-analysis-question { width:100%; color:#111; }
.score-analysis-view { padding:9px 18px; border:1px solid #687387; border-radius:5px; font-size:16px; cursor:pointer; background:white; color:#111; }
.score-analysis-fields { font:16px/1.5 system-ui,sans-serif; color:#111; }
.score-analysis-fields p { margin:18px 0 10px; }
.score-analysis-parts { display:flex; flex-wrap:wrap; gap:14px 24px; }
.score-analysis-parts label,.score-analysis-section-row label { display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:8px; }
.score-analysis-section-box { border:1px solid #687387; padding:6px 16px; }
.score-analysis-section-row { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px; padding:13px 0; }
.score-analysis-accidentals { display:flex; gap:4px; position:absolute; top:100%; left:0; z-index:4; background:white; padding:3px 0; }
.score-analysis-accidentals button { font-size:17px; padding:2px 6px; cursor:pointer; }
.score-analysis-modal { position:fixed; inset:0; z-index:2147483000; display:flex; flex-direction:column; background:#fff; color:#111; }
.score-analysis-modal-header { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:10px 18px; border-bottom:1px solid #cbd5e1; }
.score-analysis-modal-header h2 { margin:0; font:600 17px/1.4 system-ui,sans-serif; }
.score-analysis-modal-header button { font-size:16px; padding:7px 18px; cursor:pointer; border:1px solid #687387; background:white; color:#111; border-radius:4px; }
.score-analysis-modal-body { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(360px,1fr); flex:1; min-height:0; }
.score-analysis-pdf { min-width:0; min-height:0; background:#e2e8f0; }
.score-analysis-pdf iframe { width:100%; height:100%; display:block; border:0; background:white; }
.score-analysis-pdf > p { padding:20px; }
.score-analysis-answer-panel { min-width:0; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:18px 22px 32px; border-left:1px solid #cbd5e1; }
.score-analysis-answer-panel h3 { margin:0; font:600 18px system-ui,sans-serif; }
@media(max-width:720px) { .score-analysis-modal-body { grid-template-columns:1fr; grid-template-rows:minmax(180px,45%) minmax(0,1fr); } .score-analysis-answer-panel { border-left:0; border-top:1px solid #cbd5e1; padding:12px; } }