:root { color-scheme: dark; font: 17px/1.55 system-ui, sans-serif; color: #eef3f4; background: #0b141a; }
* { box-sizing: border-box; }
main { width: min(900px, 100%); padding: 24px; margin: auto; }
header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
a { color: #97ece0; }
a, button, select { touch-action: manipulation; }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 3px solid #ffcc75; outline-offset: 4px; }
h1 { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.15; margin: 18px 0; }
h2 { font-size: 1.35rem; }
.eyebrow, .small, figcaption { color: #b3c6ce; }
.eyebrow { font-size: .85rem; }
.intro { max-width: 65ch; }
figure { margin: 24px 0; }
figure img { display: block; width: 100%; height: clamp(180px, 32vw, 300px); object-fit: cover; border-radius: 8px; }
figure img.practice-art--symbol { width: min(180px, 100%); height: 180px; object-fit: contain; margin-inline: auto; }
figcaption { font-size: .85rem; margin-top: 8px; }
ul { padding-left: 24px; } li { margin: 10px 0; }
fieldset { margin: 24px 0 16px; border: 1px solid #49616d; border-radius: 8px; padding: 20px; min-width: 0; }
legend { padding: 0 8px; font-weight: 700; }
.trips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
label { display: block; font-weight: 600; min-width: 0; }
select { display: block; width: 100%; margin-top: 8px; min-height: 48px; font: inherit; padding: 8px; background: #132b36; color: #eef3f4; border: 1px solid #668997; border-radius: 4px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
button { font: inherit; font-weight: 600; cursor: pointer; min-height: 48px; padding: 10px 18px; border: 1px solid #8ed9ce; border-radius: 4px; color: #071a20; background: #97ece0; }
button[type="button"] { background: #132b36; color: #eef3f4; border-color: #668997; }
button:disabled { opacity: .65; cursor: default; }
#practice-feedback { padding: 16px; border-left: 3px solid #ffcc75; background: #13242d; }
.small { font-size: .9rem; }
@media (max-width: 540px) { main { padding: 18px; } .trips { grid-template-columns: 1fr; } fieldset { padding: 14px; } }