* {box-sizing: border-box;}
body {margin: 24px auto; padding: 0 20px; max-width: 1180px; font: 15px/1.6 system-ui, sans-serif; color: #111; background: #fff;}
a {color: #111; text-underline-offset: 3px;}
.nav {display: flex; flex-wrap: wrap; gap: 20px; align-items: baseline; border-bottom: 1px solid #111; padding-bottom: 12px;}
.wordmark {font-size: 20px; font-weight: bold; text-decoration: none;}
.dot {display: none;}
.badge, .back, .eyebrow, .pill, .caption {font-size: 12px;}
.back {margin-left: auto;}
.intro {margin: 24px 0;}
h1 {font-size: 28px; line-height: 1.3; margin: 0 0 12px;}
h2 {font-size: 20px; margin: 0 0 12px;}
h3 {font-size: 15px; margin: 0 0 8px;}
p {margin: 0 0 14px;}
.eyebrow {margin: 0 0 8px; font-weight: 600;}
.privacy {font-weight: 600;}
.steps {display: flex; gap: 32px; list-style: none; padding: 12px 0; margin: 0 0 24px; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; font-size: 13px;}
.steps span {margin-right: 10px;}
.workspace {display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: start;}
.panel {border: 1px solid #aaa; padding: 20px; min-width: 0;}
.section-heading, .result-heading {display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px;}
.sample {display: flex; flex-wrap: wrap; gap: 12px; padding: 14px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 16px 0; font-size: 12px;}
.sample span {display: block;}
.sample a {margin-left: auto;}
.paper-icon {display: none;}
button, select {font: inherit; color: #111; background: #fff; border: 1px solid #555; padding: 8px 12px; font-size: 12px; border-radius: 0; min-height: 36px;}
button, select, summary {cursor: pointer;}
button:disabled, select:disabled {color: #777; border-color: #ccc; cursor: default;}
button:hover:enabled {background: #eee;}
button[aria-pressed=true] {font-weight: bold; border: 2px solid #111;}
a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible, input:focus-visible {outline: 2px solid #111; outline-offset: 3px;}
.actions, .query-actions {display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0;}
label {display: block; font-size: 13px; margin: 14px 0 8px;}
select {width: 100%;}
.status {font-size: 12px; margin: 16px 0; min-height: 20px;}
.error {font-weight: bold;}
.table-scroll {overflow-x: auto;}
table {border-collapse: collapse; width: 100%; font-size: 11px; text-align: left; white-space: nowrap; margin-bottom: 12px;}
th, td {border: 1px solid #bbb; padding: 8px;}
th {font-weight: 600;}
details {border-top: 1px solid #bbb; padding-top: 12px; margin: 16px 0; font-size: 12px;}
summary {font-weight: 600;}
.requirement {border-bottom: 1px solid #ddd; padding: 10px 0;}
.requirement p {margin: 4px 0;}
pre {max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; border: 1px solid #ccc; padding: 12px;}
.confirmation {border: 1px solid #aaa; padding: 0 14px 14px; margin: 16px 0;}
.confirmation label {display: flex; align-items: flex-start; gap: 8px;}
input {accent-color: #111;}
.course-card {border-top: 1px solid #ccc; padding-top: 16px; margin: 16px 0; font-size: 13px;}
.course-code {font-weight: bold; margin-bottom: 8px;}
.facts {margin-bottom: 12px;}
.source-link {font-size: 12px;}
.next {border-top: 1px solid #111; margin: 30px 0 20px; padding-top: 20px;}
footer {border-top: 1px solid #aaa; padding: 16px 0; font-size: 12px;}
footer .wordmark {font-size: 15px; display: block; margin-bottom: 8px;}
.sr-only {position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);}
[hidden] {display: none!important;}
@media(max-width: 850px) {.workspace {grid-template-columns: 1fr;} .steps {gap: 18px; font-size: 11px;} .panel {padding: 16px;} body {padding: 0 14px;} .back {margin-left: 0;}}