:root {
  color-scheme: light;
  --ink: #102334;
  --muted: #496172;
  --navy: #0e2236;
  --cyan: #67e8f9;
  --blue: #075e84;
  --deep: #064866;
  --focus: #087da5;
  --border: #d5e2ec;
  --field-border: #728d9e;
  --wash: #edf6fa;
  --paper: #fff;
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #f3f7fb;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-block-size: 100vh; display: flex; flex-direction: column; }
a { color: var(--deep); overflow-wrap: anywhere; }
button, input, select, textarea { font: inherit; }
button, .button {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding: .57rem .96rem;
  border: 1px solid var(--blue);
  border-radius: .65rem;
  background: var(--blue);
  color: white;
  cursor: pointer;
  text-decoration: none;
  font-weight: 650;
}
button:disabled { cursor: default; opacity: .55; }
button:not(:disabled):hover, .button:hover { background: var(--deep); color: white; }
button.secondary, .button.secondary { background: var(--wash); color: var(--deep); border-color: var(--field-border); }
button.secondary:not(:disabled):hover, .button.secondary:hover { background: #dceef4; color: var(--deep); }
button.plain { background: transparent; border: 0; color: var(--deep); padding: 0; text-decoration: underline; }
button.plain:not(:disabled):hover { background: transparent; color: var(--ink); }
button.small { padding: .33rem .62rem; font-size: .86rem; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
input:not([type=radio], [type=checkbox]), select, textarea {
  display: block;
  width: 100%;
  min-width: 0;
  margin-block-start: .25rem;
  padding: .48rem .6rem;
  border: 1px solid var(--field-border);
  border-radius: .48rem;
  color: var(--ink);
  background: white;
}
textarea { resize: vertical; }
input[type=radio], input[type=checkbox] { accent-color: var(--blue); inline-size: 1.1rem; block-size: 1.1rem; flex: none; }
h1, h2, p { margin: 0; overflow-wrap: anywhere; }
h1 { font-size: clamp(1.9rem, 4.5vw, 3.35rem); line-height: 1.12; letter-spacing: -.035em; }
h2 { font-size: 1.34rem; line-height: 1.25; }
:lang(ar) h1 { letter-spacing: normal; line-height: 1.35; }
.shell { width: min(1100px, calc(100% - 2rem)); margin-inline: auto; }
.site-header { --focus: var(--cyan); background: var(--navy); color: #f7fbff; }
.nav { display: flex; gap: .85rem; justify-content: space-between; align-items: center; min-height: 4rem; flex-wrap: wrap; padding-block: .65rem; }
.nav nav { display: flex; align-items: center; flex-wrap: wrap; gap: .85rem; font-size: .91rem; }
.site-header a, .site-header button.plain { color: inherit; }
.site-header a:hover, .site-header button.plain:not(:disabled):hover { color: var(--cyan); }
.brand { display: inline-flex; align-items: center; gap: .65rem; font-weight: 760; text-decoration: none; }
.brand-mark, .intro-mark { display: block; flex: none; block-size: auto; }
.brand-mark { inline-size: 2.1rem; }
.language { padding: .35rem .75rem; border: 1px solid #67869b; border-radius: 2rem; text-decoration: none; }
.content { padding-block: clamp(1.5rem, 5vw, 3.5rem) 3rem; display: grid; gap: 1.15rem; }
.site-footer { margin-block-start: auto; padding-block: 1rem; border-block-start: 1px solid var(--border); color: var(--muted); font-size: .9rem; text-align: center; }
.site-footer p + p { margin-block-start: .25rem; }
.card { min-width: 0; padding: clamp(1rem, 3.5vw, 1.65rem); background: var(--paper); border: 1px solid var(--border); border-radius: 1rem; box-shadow: 0 .55rem 1.4rem #1023340d; }
.card > p + form, .card > h2 + p, .card > h2 + form, details > form { margin-block-start: .75rem; }
.landing { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2rem); padding-block: clamp(.25rem, 3vw, 2rem); }
.intro {
  display: grid;
  align-content: center;
  gap: 1rem;
  padding: clamp(1.25rem, 5vw, 3rem);
  border: 1px solid #265167;
  border-radius: 1.25rem;
  background: radial-gradient(ellipse at top right, #123e54, transparent 65%), var(--navy);
  color: #f7fbff;
}
.intro-brand { display: flex; align-items: center; gap: .85rem; }
.intro-mark { inline-size: clamp(3rem, 6vw, 4.25rem); filter: drop-shadow(0 .25rem .8rem #0ea5e942); }
.intro .eyebrow { color: var(--cyan); }
.intro-affiliation { color: #d4e6ee; font-size: .9rem; }
.intro:lang(en) h1 { max-inline-size: 13ch; }
.intro > p { color: #d4e6ee; max-inline-size: 35em; }
.intro .participant-note { border-block-start: 1px solid #456579; padding-block-start: .85rem; font-size: .9rem; }
.landing > .resource-link { grid-column: 1 / -1; }
.resource-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.65rem, 2vw, 1.15rem);
  padding: clamp(.75rem, 2vw, 1.1rem);
  border: 1px solid #bdd9e7;
  border-radius: .9rem;
  background: linear-gradient(110deg, var(--wash), var(--paper));
  text-decoration: none;
}
.resource-link:hover { border-color: var(--focus); background: var(--wash); }
.resource-link:hover strong { text-decoration: underline; }
.resource-icon { display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border-radius: .65rem; background: #d5eef7; }
.resource-text { display: grid; gap: .15rem; }
[dir="rtl"] .resource-arrow { transform: scaleX(-1); }
.citation-link { margin-block-start: .3rem; background: var(--wash); }
.citation-link .resource-icon { background: var(--navy); color: var(--cyan); }
.sign-in { display: grid; align-content: center; gap: 1.15rem; padding: clamp(1.25rem, 4vw, 2.5rem); }
.sign-in.card > form, .sign-in.card > p { margin-block-start: 0; }
.sign-in form button { inline-size: 100%; }
.account-recovery { border-block-start: 1px solid var(--border); padding-block-start: 1rem; }
.eyebrow { color: var(--deep); font-weight: 750; font-size: .8rem; letter-spacing: .065em; text-transform: uppercase; }
:lang(ar) .eyebrow { letter-spacing: normal; }
.stack { display: grid; gap: .8rem; }
.about-page { width: min(100%, 920px); margin-inline: auto; }
.about-page h3 { margin: 0; font-size: 1.06rem; }
.about-page li + li { margin-block-start: .55rem; }
.about-page .stack > ul, .about-page .stack > ol { margin-block: 0; padding-inline-start: 1.4rem; }
.about-page code { overflow-wrap: anywhere; }
#citation:target { border-color: var(--focus); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); gap: .8rem; align-items: start; }
.publication-grid { align-items: stretch; }
.publication { padding: 1rem; border: 1px solid var(--border); border-radius: .65rem; background: #f7fbfd; }
.actions { display: flex; align-items: end; gap: .65rem; flex-wrap: wrap; }
.actions > label { flex: 1 1 200px; }
.metrics strong { display: block; font-size: 1.32rem; }
.quota-balance { color: var(--deep); font-size: 2.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
label { font-weight: 550; }
label.check, label.option { display: flex; align-items: center; gap: .55rem; }
label.option { padding: .55rem .6rem; border: 1px solid var(--border); border-radius: .55rem; cursor: pointer; }
label.option:has(input:checked) { background: var(--wash); border-color: var(--blue); }
fieldset { min-width: 0; margin: 0; }
legend, summary { font-weight: 700; }
summary { cursor: pointer; }
.narrow, .participant { width: min(100%, 740px); margin-inline: auto; }
.participant > div h1 { margin-block-start: .3rem; font-size: clamp(1.7rem, 4vw, 2.55rem); }
.trial-card { box-shadow: none; }
.trial-editor, .question { border: 1px solid var(--border); border-radius: .65rem; padding: .75rem; }
.trial-editor { background: #f7fbfd; }
.question { background: white; }
.unframed { padding: 0; border: 0; }
.prompt { font-weight: 700; }
.progress { margin-block-start: .4rem; font-size: .87rem; }
progress { display: block; inline-size: 100%; block-size: .7rem; accent-color: var(--blue); }
.muted, .meta { color: var(--muted); font-size: .9rem; }
.meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.prose { white-space: pre-wrap; overflow-wrap: anywhere; }
.notice { padding: .65rem .75rem; background: var(--wash); border: 1px solid var(--border); border-radius: .5rem; }
.notice.error { background: #fff5f5; border-color: #efc1c4; color: #802130; }
audio { max-width: 100%; }
.skip, .visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.skip:focus { inline-size: auto; block-size: auto; clip-path: none; z-index: 2; background: white; padding: .55rem; }
@media (max-width: 700px) { .landing { grid-template-columns: 1fr; } }