.workshop { max-width: 1040px; padding-block: 32px 64px; line-height: 1.7; }
.workshop h1 { color: var(--heading); font-size: clamp(32px, 8vw, 56px); }
.workshop h2 { font-size: clamp(24px, 5vw, 32px); margin: 32px 0 16px; color: var(--heading); }
.workshop h3 { margin: 20px 0 10px; font-size: 21px; }
.workshop p { margin: 14px 0; }
.workshop a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.workshop li { margin-block: 8px; }
.workshop ul, .workshop ol { padding-left: 24px; }
.workshop .intro { font-size: 19px; max-width: 760px; }
.workshop .notice { border-left: 4px solid var(--accent); padding: 12px 20px; background: var(--surface); }
.workshop .steps { display: grid; gap: 20px; margin: 24px 0; }
.workshop .card { min-width: 0; padding: 24px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.workshop .card h2, .workshop .card h3 { margin-top: 0; }
.workshop pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; font: 15px/1.7 monospace; }
.workshop code { overflow-wrap: anywhere; }
.workshop table { display: block; overflow-x: auto; border-collapse: collapse; margin: 20px 0; }
.workshop td, .workshop th { padding: 12px; border: 1px solid var(--border); text-align: left; min-width: 130px; }
.workshop button, .workshop .action { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 18px; border: 1px solid var(--action); border-radius: 12px; background: var(--action); color: var(--on-action); font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; }
.workshop .local-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; border-block: 1px solid var(--border); padding-block: 12px; margin-bottom: 24px; }
.workshop .local-nav a { min-height: 44px; display: flex; align-items: center; color: var(--heading); text-decoration: none; border-bottom: 3px solid transparent; }
.workshop .local-nav a:hover { background: var(--surface-raised); }
.workshop .local-nav a[aria-current] { color: var(--action); border-bottom-color: var(--action); }
.workshop .checklist label { display: flex; gap: 12px; padding-block: 12px; align-items: flex-start; }
.workshop input[type=checkbox] { flex-shrink: 0; width: 24px; height: 24px; margin-top: 3px; accent-color: var(--action); }
.workshop .checklist { list-style: none; padding: 0; }
@media(min-width: 720px) { .workshop .steps { grid-template-columns: repeat(2,minmax(0,1fr)); } }

.workshop button:hover, .workshop .action:hover { background: var(--action-hover); color: var(--on-action); border-color: var(--action-hover); }
.workshop .eyebrow { color: var(--link); }
.workshop .intro { color: var(--heading); }
.prompt-section h2 { padding-left: 20px; border-left: 6px solid var(--accent); }
.prompt-panel { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; padding: 12px 20px 20px; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--accent); border-radius: var(--radius); }
.prompt-panel pre { align-self: stretch; margin: 0; padding: 0; border: 0; background: transparent; }
.prompt-panel button { flex-shrink: 0; }
@media(max-width:480px) { .prompt-panel { padding-inline: 16px; } }