.article-hero { padding-top: 112px; }
.article-hero h1 { max-width: 730px; }
.article-body { padding-top: 0; }
.article-meta .author a { color: #17212f; text-decoration-color: #c2410c; text-underline-offset: 3px; }
.article-content code { overflow-wrap: anywhere; white-space: normal; }
.article-content .table-label { margin-bottom: 8px; font-weight: 600; }
.workshop-table-wrap { overflow-x: auto; margin: 16px 0 28px; }
.workshop-table-wrap table { min-width: 630px; margin: 0; }
.workshop-table-wrap th:first-child { width: 16%; }
.workshop-table-hint { display: none; color: #526071; font-size: 14px; }
.workshop-replay { margin: 24px 0 40px; }
.workshop-replay video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #161616; border-radius: 12px; }
.workshop-replay-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 16px 0; }
.workshop-replay-tools button, .workshop-replay-tools a, .workshop-join a { display: inline-flex; align-items: center; justify-content: flex-start; min-height: 44px; padding: 11px 16px; border-radius: 8px; border: 1px solid #bbc2cb; font: 500 15px/1.4 Rubik, sans-serif; color: #17212f; background: #fff; cursor: pointer; text-decoration: none; }
.workshop-replay-tools button:hover, .workshop-replay-tools a:hover { background: #f4f5f6; }
.workshop-replay-tools .workshop-play, .workshop-join .workshop-primary { background: #c2410c; border-color: #c2410c; color: #fff; }
.workshop-replay-tools .workshop-play:hover, .workshop-join .workshop-primary:hover { background: #9a3412; color: #fff; }
.workshop-replay-tools button:focus-visible, .workshop-replay-tools a:focus-visible, .workshop-figure button:focus-visible, .workshop-join a:focus-visible { outline: 3px solid #a43b12; outline-offset: 4px; }
.article-content .workshop-replay-note { font-size: 15px; line-height: 1.6; color: #526071; margin-bottom: 10px; }
.article-content .workshop-replay-status { font-size: 15px; line-height: 1.6; color: #526071; }
.article-content a[data-workshop-time] { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.workshop-figure { margin: 28px 0 36px; }
.workshop-figure button { display: block; width: 100%; margin: 0; padding: 0; border: 1px solid #d9dee5; border-radius: 10px; background: #fff; cursor: zoom-in; overflow: hidden; }
.workshop-figure img { display: block; width: 100%; height: auto; margin: 0; }
.workshop-figure figcaption { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: #526071; text-align: left; }
.workshop-prompt { margin: 20px 0 28px; padding: 20px 22px; border-left: 3px solid #c2410c; background: #f7f8fa; border-radius: 0 8px 8px 0; }
.workshop-prompt p { margin: 0; color: #273445; font-size: 16px; line-height: 1.7; }
.article-content .workshop-join { margin: 40px 0; padding: 24px; border: 1px solid #fed7aa; border-radius: 12px; background: #fff7ed; }
.article-content .workshop-join h2 { margin-top: 0; }
.article-content .workshop-join a { margin: 8px 10px 0 0; }
.workshop-source-note { color: #526071; font-size: 15px; }
.workshop-image-dialog { width: min(1460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 18px; border: 1px solid #d9dee5; border-radius: 14px; background: #fff; }
.workshop-image-dialog::backdrop { background: rgb(0 0 0 / .72); }
.workshop-image-dialog button { display: block; min-height: 44px; margin: 0 0 12px auto; padding: 8px 14px; border: 1px solid #aab4c1; border-radius: 6px; font: 500 15px Rubik, sans-serif; color: #17212f; background: #fff; cursor: pointer; }
.workshop-image-dialog img { display: block; width: 100%; height: auto; max-height: calc(100dvh - 144px); object-fit: contain; }
.workshop-image-dialog p { margin: 12px 0 0; font: 400 15px/1.5 Rubik, sans-serif; color: #526071; }
@media (max-width: 768px) {
 .article-hero { padding-top: 88px; }
 .workshop-table-hint { display: block; }
 .workshop-replay-tools { display: grid; grid-template-columns: 1fr; }
 .workshop-replay-tools button, .workshop-replay-tools a { width: 100%; }
 .workshop-prompt { padding: 16px; }
 .article-content .workshop-join { padding: 20px; }
 .workshop-image-dialog { padding: 12px; }
}