/* ================================================================ structural-interaction — exp_1 UI themes: playful (default) | botanical | bauhaus set via [data-theme] on ================================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; padding: 0; } body { font-family: var(--font-body); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } button { font-family: inherit; cursor: pointer; } img { display: block; } p, li, label, h1, h2, h3 { user-select: none; -webkit-user-select: none; } .prevent-select { user-select: none; -webkit-user-select: none; } /* ── Theme tokens ──────────────────────────────────────────── */ :root, [data-theme="playful"] { --font-body: 'IBM Plex Sans', system-ui, sans-serif; --font-display: 'Lora', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --bg: #FBF6EC; --bg-2: #F1E9D7; --surface: #FFFFFF; --ink: #2C2A24; --ink-2: #5C5849; --ink-3: #8C8674; --line: #E5DCC9; --line-2: #D4C8B0; --species-green: #2E9C7E; --species-orange: #E27244; --accent: #2C2A24; --accent-ink: #FBF6EC; --accent-soft: #B6452B; --good: oklch(0.62 0.13 150); --bad: oklch(0.58 0.18 25); --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --shadow-1: 0 1px 2px oklch(0.20 0.01 85 / 0.06), 0 2px 6px oklch(0.20 0.01 85 / 0.04); --shadow-2: 0 4px 14px oklch(0.20 0.01 85 / 0.08), 0 1px 3px oklch(0.20 0.01 85 / 0.05); --shadow-3: 0 12px 40px oklch(0.20 0.01 85 / 0.12), 0 2px 8px oklch(0.20 0.01 85 / 0.06); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --spring: cubic-bezier(0.34, 1.4, 0.64, 1); --t-fast: 140ms; --t-med: 240ms; --t-slow: 380ms; --display-weight: 500; --display-tracking: -0.02em; } [data-theme="botanical"] { --font-body: 'Source Sans 3', system-ui, sans-serif; --font-display: 'Cormorant Garamond', 'Source Serif Pro', serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --bg: oklch(0.965 0.012 110); --bg-2: oklch(0.93 0.018 120); --surface: oklch(0.985 0.005 100); --ink: oklch(0.26 0.025 150); --ink-2: oklch(0.46 0.025 150); --ink-3: oklch(0.62 0.022 130); --line: oklch(0.88 0.02 120); --line-2: oklch(0.78 0.025 130); --species-green: oklch(0.50 0.12 155); --species-orange: oklch(0.62 0.14 38); --accent: oklch(0.32 0.06 150); --accent-ink: oklch(0.97 0.012 110); --accent-soft: oklch(0.50 0.10 155); --good: oklch(0.55 0.13 150); --bad: oklch(0.55 0.16 28); --radius-sm: 4px; --radius: 8px; --radius-lg: 14px; --shadow-1: 0 1px 2px oklch(0.30 0.03 150 / 0.06); --shadow-2: 0 3px 14px oklch(0.30 0.03 150 / 0.08); --shadow-3: 0 14px 40px oklch(0.30 0.03 150 / 0.14); --display-weight: 500; --display-tracking: -0.005em; } [data-theme="bauhaus"] { --font-body: 'Space Grotesk', 'Inter', system-ui, sans-serif; --font-display: 'Space Grotesk', 'Inter', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --bg: #F5F1E8; --bg-2: #EBE5D2; --surface: #FFFDF7; --ink: #1A1A1A; --ink-2: #4A4A4A; --ink-3: #7A7A7A; --line: #1A1A1A; --line-2: #1A1A1A; --species-green: #2E7D5B; --species-orange: #D94A1F; --accent: #1A1A1A; --accent-ink: #F5F1E8; --accent-soft: #2256C7; --good: #2E7D5B; --bad: #D94A1F; --radius-sm: 0px; --radius: 0px; --radius-lg: 0px; --shadow-1: 2px 2px 0 #1A1A1A; --shadow-2: 4px 4px 0 #1A1A1A; --shadow-3: 8px 8px 0 #1A1A1A; --display-weight: 700; --display-tracking: -0.025em; } /* ── Top frame: phase stepper + progress bar ──────────────── */ .frame-top { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } /* in dev mode, toolbar is 32px above; push stepper down */ body.dev-mode .frame-top { top: 32px; } .stepper { max-width: 1100px; margin: 0 auto; padding: 12px 24px 10px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .steps { display: flex; align-items: center; gap: 0; flex: 1; justify-content: space-evenly; } .step { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); transition: color var(--t-med) var(--ease); white-space: nowrap; padding: 0 12px; } .step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); flex-shrink: 0; transition: background var(--t-med) var(--ease), transform var(--t-med) var(--spring); } .step.active { color: var(--ink); font-weight: 600; } .step.active .step-dot { background: var(--accent); transform: scale(1.4); } .step.done .step-dot { background: var(--ink-2); } .step-sep { width: 1px; height: 16px; background: var(--line-2); flex-shrink: 0; } /* sub-step pips inside the active step */ .sub-steps { display: flex; align-items: center; gap: 3px; margin-left: 10px; } .sub-pip { width: 10px; height: 3px; border-radius: 2px; background: var(--line-2); transition: background var(--t-med) var(--ease), width var(--t-med) var(--ease); } .sub-pip.done { background: var(--ink-3); } .sub-pip.now { background: var(--ink); width: 14px; } .sub-label { font-size: 11px; color: var(--ink-3); font-weight: 400; margin-left: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; } .progress-track { height: 3px; background: var(--line); position: relative; } .progress-fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); transition: width var(--t-slow) var(--ease); } /* hide jsPsych's built-in progress bar */ #jspsych-progressbar-container { display: none !important; } /* ── jsPsych content area ──────────────────────────────────── */ #jspsych-content { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 84px 24px 64px; } /* extra top clearance in dev mode (toolbar 32px + frame-top ~48px) */ body.dev-mode #jspsych-content { padding-top: 116px; } /* ── Page layout ───────────────────────────────────────────── */ .page-inner { width: 100%; max-width: 920px; } /* ── Card ──────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: 40px 48px; text-align: left; } .card-narrow { max-width: 720px; margin: 0 auto; } .eyebrow { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; font-weight: 600; } h1 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); font-size: 30px; line-height: 1.1; margin: 0 0 8px; color: var(--ink); } h2 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); font-size: 44px; margin: 0 0 12px; color: var(--ink); } p { font-size: 16.5px; line-height: 1.65; color: var(--ink); margin: 0 0 14px; } p.lead { font-size: 18px; } p.muted { color: var(--ink-2); font-size: 15px; } hr { border: none; border-top: 1px solid var(--line); margin: 28px 0; } /* ── Buttons ───────────────────────────────────────────────── */ .btn { font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; padding: 12px 22px; border-radius: var(--radius-sm); border: 1px solid transparent; background: var(--accent); color: var(--accent-ink); cursor: pointer; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease); box-shadow: var(--shadow-1); display: inline-flex; align-items: center; gap: 6px; } .btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-2); } .btn:active:not(:disabled) { transform: translateY(0); } .btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; } .btn-lg { padding: 14px 28px; font-size: 16px; } .btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-2); } .btn-secondary:hover:not(:disabled) { background: var(--bg-2); border-color: var(--ink-3); } .btn-ghost { background: transparent; color: var(--ink-2); box-shadow: none; border-color: transparent; } .btn-ghost:hover:not(:disabled) { color: var(--ink); background: var(--bg-2); } .btn-row { display: flex; gap: 12px; justify-content: center; align-items: center; } /* override jsPsych default button */ .jspsych-btn { font-family: var(--font-body); font-size: 15px; font-weight: 600; padding: 12px 22px; border-radius: var(--radius-sm); border: 1px solid transparent; background: var(--accent); color: var(--accent-ink); cursor: pointer; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); box-shadow: var(--shadow-1); } .jspsych-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-2); } .jspsych-btn:disabled { opacity: 0.45; cursor: not-allowed; } .lock-count { font-variant-numeric: tabular-nums; opacity: 0.7; font-size: 0.9em; } /* ── Animations ────────────────────────────────────────────── */ @keyframes text-swing-in { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: translateY(0); } } .swing-in { opacity: 0; animation: text-swing-in 2800ms var(--ease-out) both; } @media (prefers-reduced-motion: reduce) { .swing-in { animation: none; opacity: 1; } } .swing-in.d-1 { animation-delay: 480ms; } .swing-in.d-2 { animation-delay: 1200ms; } .swing-in.d-3 { animation-delay: 1960ms; } .swing-in.d-4 { animation-delay: 2760ms; } .swing-in.d-5 { animation-delay: 3600ms; } .swing-in.d-6 { animation-delay: 4480ms; } .swing-in.d-7 { animation-delay: 5400ms; } .swing-in.d-8 { animation-delay: 6360ms; } /* ── Choice cards (comp check) ─────────────────────────────── */ /* sequential reveal container — expands from 0 height when .open is added */ .comp-q-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 700ms var(--ease-out); overflow: hidden; } .comp-q-wrap.open { grid-template-rows: 1fr; } .comp-q-inner { min-height: 0; padding-top: 4px; } .q-block { margin-bottom: 28px; } .q-label { font-weight: 600; font-size: 16px; color: var(--ink); margin-bottom: 12px; } .choice-list { display: flex; flex-direction: column; gap: 10px; } .choice { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: all var(--t-fast) var(--ease); } .choice:hover { border-color: var(--ink-3); transform: translateY(-1px); } .choice.selected { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 6%, var(--surface)); } .choice-radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-2); flex-shrink: 0; transition: all var(--t-fast) var(--ease); } .choice.selected .choice-radio { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--surface); } .choice-text { font-size: 15.5px; color: var(--ink); } .comp-error { color: var(--bad); font-size: 14px; background: color-mix(in oklab, var(--bad) 8%, var(--surface)); border: 1px solid color-mix(in oklab, var(--bad) 30%, var(--surface)); border-radius: var(--radius-sm); padding: 10px 16px; margin-top: 16px; display: none; } /* ── Intro pages ───────────────────────────────────────────── */ .intro-figure { display: flex; gap: 56px; justify-content: center; align-items: center; margin: 32px 0 16px; } .intro-or { font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; } .intro-fig-item { display: flex; flex-direction: column; align-items: center; gap: 8px; } .intro-fig-item .alien-img-wrap { width: 160px; height: 160px; } .intro-fig-item .fig-label { font-size: 14px; font-weight: 600; color: var(--ink); } .intro-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; } .intro-dots { display: flex; gap: 6px; } .intro-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); transition: background var(--t-fast) var(--ease), width var(--t-fast) var(--ease); } .intro-dot.active { background: var(--ink); width: 18px; border-radius: 3px; } /* ── Learning trial ────────────────────────────────────────── */ .learn-stage { width: 100%; display: flex; flex-direction: column; align-items: center; } .learn-eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 12px; } .learn-frame { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: 40px 56px 40px; } .pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 24px; } .alien-slot { display: flex; flex-direction: column; align-items: center; gap: 16px; } .alien-img-wrap { position: relative; width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; transition: transform var(--t-med) var(--ease); } .alien-img-wrap.upside-down { transform: rotate(180deg); } .alien-img { width: 100%; height: 100%; object-fit: contain; } /* bond connector */ .bond { display: flex; align-items: center; justify-content: center; width: 120px; height: 160px; } .bond-line { flex: 1; height: 3px; background: var(--ink-2); position: relative; } .bond-line::before, .bond-line::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: 0; height: 0; } .bond-line::before { left: -1px; border-right: 10px solid var(--ink-2); border-top: 6px solid transparent; border-bottom: 6px solid transparent; } .bond-line::after { right: -1px; border-left: 10px solid var(--ink-2); border-top: 6px solid transparent; border-bottom: 6px solid transparent; } /* behavior plate */ .behavior { display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0; transform: translateY(8px) scale(0.9); transition: opacity var(--t-med) var(--ease-out), transform var(--t-slow) var(--spring); } .behavior.revealed { opacity: 1; transform: translateY(0) scale(1); } .behavior-plate { display: flex; align-items: center; gap: 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 8px 18px 8px 10px; } .behavior-icon { width: 36px; height: 36px; object-fit: contain; } .behavior-name { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; } /* ── Run break ─────────────────────────────────────────────── */ .run-break { text-align: center; padding: 40px 32px; } .run-break .meta { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; font-weight: 600; } .run-progress { display: flex; gap: 6px; justify-content: center; margin: 24px 0 32px; } .run-pip { width: 26px; height: 6px; border-radius: 3px; background: var(--line-2); } .run-pip.done { background: var(--ink-2); } .run-pip.now { background: var(--accent); animation: pip-pulse 1.2s ease-in-out infinite; } @keyframes pip-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } /* ── Validation trials ─────────────────────────────────────── */ .val-stage { display: flex; flex-direction: column; align-items: center; width: 100%; } .val-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: 40px 48px; width: 100%; max-width: 720px; text-align: center; } .val-counter { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .val-counter-pips { display: flex; gap: 4px; } .val-counter-pip { width: 18px; height: 4px; border-radius: 2px; background: var(--line-2); } .val-counter-pip.done { background: var(--ink-2); } .val-counter-pip.now { background: var(--accent); } .val-prompt { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); font-size: 26px; line-height: 1.25; margin: 8px 0 28px; } .val-subjects { display: flex; gap: 56px; justify-content: center; margin-bottom: 32px; } .val-subject { display: flex; flex-direction: column; align-items: center; } .val-subject .alien-img-wrap { width: 160px; height: 160px; } .val-options { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .option { display: flex; align-items: center; gap: 10px; padding: 12px 22px; font-size: 16px; font-weight: 600; border-radius: var(--radius); border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer; transition: all var(--t-fast) var(--ease); min-width: 120px; justify-content: center; } .option:hover { border-color: var(--ink-2); transform: translateY(-1px); } .option.selected { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 8%, var(--surface)); } .option-icon { width: 28px; height: 28px; object-fit: contain; } .option-swatch { width: 14px; height: 14px; border-radius: 50%; } .swatch-green { background: var(--species-green); } .swatch-orange { background: var(--species-orange); } /* ── Transfer trial ────────────────────────────────────────── */ .transfer-stage { display: flex; flex-direction: column; align-items: center; width: 100%; } .transfer-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: 40px 48px 48px; width: 100%; max-width: 880px; } .transfer-section { transition: opacity var(--t-slow) var(--ease), filter var(--t-slow) var(--ease); } .transfer-section.dimmed { opacity: 0.32; filter: grayscale(0.4); pointer-events: none; } .transfer-section + .transfer-section { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); } .transfer-section.appearing { animation: section-in var(--t-slow) var(--ease-out); } @keyframes section-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .novel-alien { display: flex; flex-direction: column; align-items: center; margin-bottom: 18px; } .novel-alien .alien-img-wrap { width: 160px; height: 160px; } .novel-alien.unknown .alien-img { filter: grayscale(100%) brightness(0.95); } .novel-tag { display: inline-flex; align-items: center; padding: 4px 14px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--ink-2); margin-top: 8px; } .transfer-q { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); font-size: 26px; line-height: 1.3; text-align: center; margin: 0 0 8px; } .transfer-sub { text-align: center; color: var(--ink-2); font-size: 15px; margin-bottom: 24px; } .cue-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 640px; margin: 0 auto; } .cue-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 20px; border: 1.5px solid var(--line-2); border-radius: var(--radius); background: var(--surface); cursor: pointer; text-align: center; transition: all var(--t-fast) var(--ease); font-size: 15px; color: var(--ink); } .cue-card:hover:not(.locked) { border-color: var(--ink-2); transform: translateY(-2px); box-shadow: var(--shadow-2); } .cue-card.selected { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 6%, var(--surface)); } .cue-card.locked { opacity: 0.5; cursor: default; } .cue-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--bg-2); display: flex; align-items: center; justify-content: center; font-size: 22px; } .cue-icon-color { background: linear-gradient(135deg, var(--species-green) 0%, var(--species-green) 50%, var(--species-orange) 50%, var(--species-orange) 100%); } .cue-icon svg { width: 22px; height: 22px; } .cue-title { font-weight: 600; font-size: 15px; } .cue-desc { color: var(--ink-2); font-size: 13.5px; } .reveal-block { background: var(--bg-2); border-radius: var(--radius); padding: 28px 24px; text-align: center; } .reveal-label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 14px; } .friends-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 8px; } .friend-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); width: 120px; animation: friend-in var(--t-slow) var(--ease-out) backwards; } .friend-card .alien-img-wrap { width: 72px; height: 72px; } .friend-card .alien-img { } /* species color shown */ .friend-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--bg-2); border-radius: 999px; padding: 3px 10px; } .friend-pill img { width: 16px; height: 16px; object-fit: contain; } @keyframes friend-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .predict-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 520px; margin: 16px auto 0; } .predict-btn { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px; border: 1.5px solid var(--line-2); border-radius: var(--radius); background: var(--surface); cursor: pointer; font-size: 17px; font-weight: 600; color: var(--ink); transition: all var(--t-fast) var(--ease); } .predict-btn:hover { border-color: var(--ink-2); transform: translateY(-1px); } .predict-btn.selected { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 8%, var(--surface)); } .predict-btn:disabled { opacity: 0.5; cursor: default; transform: none; } .predict-btn img { width: 40px; height: 40px; object-fit: contain; } .slider-block { background: var(--bg-2); border-radius: var(--radius); padding: 22px 24px 18px; margin-top: 18px; } .slider-value { text-align: center; font-size: 22px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; margin-bottom: 8px; font-family: var(--font-display); } .slider-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-3); margin-top: 6px; } input[type=range].slider { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 4px; background: var(--line); outline: none; cursor: pointer; } input[type=range].slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); border: 3px solid var(--surface); box-shadow: var(--shadow-2); cursor: pointer; transition: transform var(--t-fast) var(--spring); } input[type=range].slider::-webkit-slider-thumb:hover { transform: scale(1.15); } input[type=range].slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); border: 3px solid var(--surface); box-shadow: var(--shadow-2); cursor: pointer; } /* ── Strategy ──────────────────────────────────────────────── */ .strategy-textarea { width: 100%; min-height: 160px; padding: 16px 18px; font-family: inherit; font-size: 15.5px; line-height: 1.55; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); resize: vertical; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); display: block; margin-top: 16px; } .strategy-textarea:focus { outline: none; border-color: var(--ink-2); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ink) 8%, transparent); } .strategy-textarea::placeholder { color: var(--ink-3); } /* ── Demographics ──────────────────────────────────────────── */ .demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; } .demo-field { display: flex; flex-direction: column; gap: 6px; } .demo-field.full { grid-column: 1 / -1; } .demo-field label { font-size: 13.5px; font-weight: 600; color: var(--ink); } .demo-field input, .demo-field select { padding: 11px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-family: inherit; font-size: 15px; color: var(--ink); transition: border-color var(--t-fast) var(--ease); } .demo-field input:focus, .demo-field select:focus { outline: none; border-color: var(--ink-2); } .checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .checkbox-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--t-fast) var(--ease); } .checkbox-row:hover { background: var(--bg-2); } .checkbox-row input { accent-color: var(--accent); width: 16px; height: 16px; } .checkbox-row span { font-size: 14.5px; color: var(--ink); } /* ── Completion ────────────────────────────────────────────── */ .complete-card { text-align: center; padding: 64px 48px; } .check-circle { width: 64px; height: 64px; border-radius: 50%; background: color-mix(in oklab, var(--good) 15%, transparent); color: var(--good); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .check-circle svg { width: 32px; height: 32px; } /* ── Block test ────────────────────────────────────────────── */ .block-test-prompt { font-size: 22px; font-weight: 600; text-align: center; margin: 0 0 22px; color: var(--ink); } .block-test-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 0; } .block-test-feedback { text-align: center; margin-top: 18px; font-size: 16px; font-weight: 600; min-height: 26px; } .feedback-correct { color: var(--good); } .feedback-incorrect { color: var(--bad); } /* ── Transfer grey note ────────────────────────────────────── */ .novel-grey-note { font-size: 13px; color: var(--ink-3); text-align: center; margin-top: 6px; } /* ── Dev toolbar (fixed at very top in testing mode) ──────── */ #dev-toolbar { position: fixed; top: 0; left: 0; right: 0; z-index: 99999; width: 100%; } /* ── Fullscreen overlay ────────────────────────────────────── */ #fullscreen-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.88); z-index: 99999; display: flex; justify-content: center; align-items: center; } .fullscreen-overlay-box { background: var(--surface); border-radius: var(--radius-lg); padding: 48px 56px; text-align: center; max-width: 480px; box-shadow: var(--shadow-3); } .fullscreen-overlay-box p { color: var(--ink); font-size: 18px; } /* ── Viewport lock overlay ────────────────────────────────── */ #viewport-lock-overlay { position: fixed; inset: 0; background: rgba(244, 243, 238, 0.96); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 99998; display: flex; align-items: center; justify-content: center; padding: 32px; } #viewport-lock-overlay .viewport-lock-card { max-width: 480px; text-align: center; background: var(--surface); border-radius: var(--radius-lg); padding: 48px 56px; box-shadow: var(--shadow-3); } #viewport-lock-overlay .viewport-lock-card p { color: var(--ink); font-size: 18px; } #viewport-lock-overlay .viewport-lock-card .muted { color: var(--ink-2); font-size: 15px; margin-top: 12px; } /* ── jsPsych instructions override ────────────────────────── */ #jspsych-instructions-nav { display: none !important; }