#dimensions-worksheet {
    --bonus-field-bg: #0d1524;
    --bonus-field-border: #766b9b;
    --bonus-field-ink: #eee8ff;
    --bonus-field-focus: #b9a0ff;
    --bonus-status-ink: #c5bfd8;
}

#attention-worksheet {
    --bonus-field-bg: #211711;
    --bonus-field-border: #a07a58;
    --bonus-field-ink: #fff0de;
    --bonus-field-focus: #ffc46b;
    --bonus-status-ink: #d6bfa8;
}

.bonus-response { margin: 18px 0 24px; }
.bonus-response label {
    display: block;
    color: var(--bonus-field-ink);
    font: 600 15px/1.6 system-ui, sans-serif;
}
.bonus-response textarea {
    display: block;
    width: 100%;
    min-height: 140px;
    resize: vertical;
    padding: 14px 16px;
    margin: 10px 0;
    border: 1px solid var(--bonus-field-border);
    border-radius: 12px;
    background: var(--bonus-field-bg);
    color: var(--bonus-field-ink);
    font: 16px/1.7 system-ui, sans-serif;
}
.bonus-response textarea::placeholder { color: var(--bonus-status-ink); opacity: .8; }
:is(.bonus-response textarea, #att-exit-response):focus-visible {
    outline: 3px solid var(--bonus-field-focus);
    outline-offset: 3px;
}
:is(#dimensions-worksheet, #attention-worksheet) .bonus-save-status {
    font: 13px/1.6 system-ui, sans-serif;
    color: var(--bonus-status-ink);
    margin: 8px 0 0;
}
.bonus-print-response { display: none; }

@media print {
    :is(#dimensions-worksheet, #attention-worksheet) :is(.bonus-response textarea, #att-exit-response, .bonus-save-status) { display: none; }
    :is(#dimensions-worksheet, #attention-worksheet) .bonus-print-response {
        display: block;
        min-height: 100px;
        padding: 12px;
        margin: 10px 0 20px;
        border: 1px solid #777;
        background: white;
        color: black !important;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        font: 14px/1.7 system-ui, sans-serif;
    }
    .bonus-response label { color: black; }
}