/* Original learning-example styling. Copyright (c) 2026 StyleGallery contributors. MIT. */
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
button, input, select { touch-action: manipulation; }
button:focus-visible, input:focus-visible, select:focus-visible, [tabindex="-1"]:focus-visible { outline: 3px solid #307865; outline-offset: 3px; }
[hidden] { display: none !important; }
h1, h2, p { margin: 0; }
svg { display: block; }
.sr-only { block-size: 1px; clip-path: inset(50%); inline-size: 1px; overflow: hidden; position: absolute; white-space: nowrap; }
.no-script { font: 12px/1.5 system-ui, sans-serif; padding: 12px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; } }

body { background: #f0ece4; color: #3e3a31; font: 12px/1.45 Arial, Helvetica, sans-serif; padding: 18px; }
.visit_layout { background: #fffcf5; border: 1px solid #e0d9cc; border-radius: 14px; display: grid; grid-template-columns: 168px minmax(0, 1fr); margin-inline: auto; max-inline-size: 840px; min-block-size: 384px; overflow: hidden; }
.visit_art { background: #e9c798; color: #794e32; display: flex; flex-direction: column; padding: 21px 22px; }
.visit_wordmark { font-family: Georgia, 'Times New Roman', serif; font-size: 27px; letter-spacing: -1.7px; line-height: 1; }
.visit_wordmark span { display: inline-block; font: 8px/1 Arial, sans-serif; margin-inline-start: 3px; vertical-align: top; }
.visit_art_center { align-items: center; display: flex; flex: 1; flex-direction: column; justify-content: center; margin-block: 8px; }
.visit_art_center svg { inline-size: 132px; max-inline-size: 100%; }
.visit_art_center p { font-family: Georgia, 'Times New Roman', serif; font-size: 23px; letter-spacing: -.6px; line-height: 1.05; text-align: center; }
.visit_art_footer { font-size: 8px; letter-spacing: 2px; line-height: 1.9; }
.visit_art_footer span { color: #936e4d; font-size: 8px; letter-spacing: .1px; }
.visit_form_area { min-inline-size: 0; padding: 22px 22px 18px; }
.visit_eyebrow { color: #9b8f79; font-size: 7px; letter-spacing: 1.65px; }
.visit_header h1 { font-family: Georgia, 'Times New Roman', serif; font-size: 29px; font-weight: 400; letter-spacing: -.8px; line-height: 1.2; margin-block-start: 5px; }
.visit_progress_row { align-items: center; display: flex; gap: 12px; margin-block: 16px; }
.visit_progress_row progress { accent-color: #a2623d; appearance: none; background: #eee7db; block-size: 4px; border: 0; border-radius: 10px; flex: 1; inline-size: 100%; overflow: hidden; }
.visit_progress_row progress::-webkit-progress-bar { background: #eee7db; }
.visit_progress_row progress::-webkit-progress-value { background: #a2623d; }
.visit_progress_row progress::-moz-progress-bar { background: #a2623d; }
.visit_progress_row p { color: #99866e; flex-shrink: 0; font: 9px/1 monospace; }
.visit_step_heading { font-size: 14px; font-weight: 500; margin-block-end: 14px; }
.visit_panel { border: 0; margin: 0; min-block-size: 150px; min-inline-size: 0; padding: 0; }
.visit_field_grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.visit_field { display: grid; gap: 5px; min-inline-size: 0; }
.visit_field label { color: #766b58; font-size: 9px; }
.visit_field input, .visit_field select { background: #fffef9; block-size: 33px; border: 1px solid #ded6c8; border-radius: 5px; color: #655d4d; font-size: 10px; inline-size: 100%; min-inline-size: 0; padding: 5px 7px; }
.visit_field input::placeholder { color: #b0a18a; }
.visit_field [aria-invalid="true"] { border-color: #ac492e; }
.field_error { color: #a1412c; font-size: 9px; }
.visit_tip { align-items: baseline; color: #9c8a6e; display: flex; flex-wrap: wrap; font-size: 9px; gap: 4px; margin-block-start: 14px; }
.visit_tip span { color: #b78251; margin-inline-end: 3px; }
.visit_tip button { background: transparent; border: 0; color: #8d6842; font-size: 9px; padding: 2px 0; text-decoration: underline; text-underline-offset: 3px; }
.visit_actions { align-items: center; border-block-start: 1px solid #ece4d7; display: flex; gap: 8px; justify-content: space-between; margin-block-start: 13px; padding-block-start: 14px; }
.visit_local_note { color: #9a8c74; font-size: 8px; max-inline-size: 112px; }
.visit_action_buttons { align-items: center; display: flex; flex-shrink: 0; gap: 6px; }
.visit_back { background: transparent; border: 1px solid #e3dac9; border-radius: 5px; color: #7c6e58; font-size: 10px; min-block-size: 32px; padding: 6px 9px; }
.visit_next { background: #96613d; border: 1px solid #96613d; border-radius: 5px; color: #fffbf1; font-size: 10px; min-block-size: 32px; padding: 6px 11px; }
.visit_next:hover { background: #784a2b; }
.visit_next:disabled { background: #b5a087; border-color: #b5a087; }
.visit_next span { margin-inline-start: 7px; }
.visit_back:hover { background: #f4eddf; }
.workshop_choice { align-items: center; background: #faf5e9; border: 1px solid #e5dccb; border-radius: 6px; display: flex; gap: 9px; margin-block-end: 8px; padding: 9px; }
.workshop_choice:has(input:checked) { background: #f3e5ce; border-color: #cda576; }
.workshop_choice input { accent-color: #95613c; margin: 0; }
.workshop_choice strong { display: block; font-size: 10px; font-weight: 500; }
.workshop_choice small { color: #9c896b; display: block; font-size: 8px; margin-block-start: 2px; }
.workshop_number { color: #ba9b74; font-family: Georgia, serif; font-size: 18px; margin-inline-start: auto; }
.visit_summary { margin: 0; }
.visit_summary div { border-block-end: 1px solid #eee6d7; display: grid; gap: 14px; grid-template-columns: 60px minmax(0, 1fr); padding-block: 11px; }
.visit_summary dt { color: #a18c6c; font-size: 10px; }
.visit_summary dd { font-size: 10px; margin: 0; overflow-wrap: anywhere; }
.visit_review_note { color: #9c896c; font-size: 9px; margin-block-start: 12px; }
@media (min-width: 900px) { .visit_layout { grid-template-columns: 240px minmax(0, 1fr); min-block-size: 465px; } .visit_form_area { padding: 32px; } .visit_panel { min-block-size: 215px; } .visit_header h1 { font-size: 37px; } .visit_art_center svg { inline-size: 160px; } .visit_art_center p { font-size: 32px; } .visit_field input, .visit_field select { block-size: 40px; font-size: 12px; } }
@media (max-width: 520px) { body { padding: 8px; } .visit_layout { grid-template-columns: minmax(0, 1fr); } .visit_art { align-items: center; flex-direction: row; gap: 10px; justify-content: space-between; padding: 14px 18px; } .visit_art_center { display: none; } .visit_art_footer { text-align: end; } .visit_form_area { padding: 20px 18px; } .visit_panel { min-block-size: 0; } .visit_field_grid { grid-template-columns: minmax(0, 1fr); } .visit_field input, .visit_field select { block-size: 38px; font-size: 12px; } .visit_field label { font-size: 10px; } .visit_actions { align-items: stretch; flex-direction: column; margin-block-start: 18px; } .visit_action_buttons { justify-content: flex-end; } .visit_local_note { max-inline-size: none; } .visit_next, .visit_back { min-block-size: 36px; } }