.intro { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem,5vw,5rem); padding-block: clamp(2.5rem,5vw,5rem); }
.intro h1 { margin: .8rem 0 1rem; font-size: clamp(2.8rem,4.65vw,4.5rem); }
.intro p { max-width: 52ch; font-size: 1.045rem; }
.intro small { display: block; margin-top: 1.1rem; color: var(--muted); }
.study-plate { border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: white; }
.study-plate img { display: block; width: 100%; height: auto; max-height: 23rem; object-fit: contain; }
.plate-legend { padding: .7rem 1rem; border-top: 1px solid var(--line); color: var(--muted); }
.study-body { border-top: 1px solid var(--line); padding-top: 2rem; display: grid; grid-template-columns: minmax(10rem,14rem) minmax(0,1fr); gap: clamp(2rem,4vw,4rem); }
.contents { align-self: start; position: sticky; top: 1.5rem; max-height: calc(100dvh - 3rem); overflow-y: auto; }
.contents summary { font-weight: 660; padding-block: .7rem; cursor: pointer; }
.contents nav { counter-reset: topics; }
.contents nav a { counter-increment: topics; display: grid; grid-template-columns: 1.75rem 1fr; gap: .3rem; padding: .7rem 0; border-top: 1px solid var(--line); font-size: .86rem; line-height: 1.4; text-decoration: none; }
.contents nav a::before { content: counter(topics, decimal-leading-zero); font: .75rem/1.6 var(--mono); color: var(--accent); }
.contents a:hover, .evidence a:hover { color: var(--accent); text-decoration: underline; }
.review-note { padding: clamp(1.2rem,2.5vw,2.2rem); background: var(--tint); border-radius: 9px; }
.review-note h2 { font-size: clamp(1.55rem,2.45vw,2.25rem); }
.review-note p { margin-top: .85rem; max-width: 76ch; }
.evidence { font-size: .88rem; }
.evidence strong { margin-right: .45rem; color: var(--ink); }
.study-sections > section[id] { padding-block: clamp(2rem,4vw,3.4rem) 0; scroll-margin-top: 1.5rem; }
.study-sections > section[id] h2 { font-size: clamp(1.65rem,2.8vw,2.6rem); margin: .4rem 0 1.3rem; }
.gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.gallery figure { background: #fff; border: 1px solid var(--line); border-radius: 7px; align-self: start; }
.gallery figure:target { outline: 2px solid var(--accent); outline-offset: 2px; scroll-margin-top: 1rem; }
.drawing { display: block; cursor: zoom-in; }
.drawing img { width: 100%; height: auto; border-radius: 7px 7px 0 0; }
figcaption { display: flex; justify-content: space-between; gap: .6rem; padding: .8rem 1rem; border-top: 1px solid var(--line); font-size: .9rem; font-weight: 560; }
.study aside { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-block: 3rem; background: #24312a; color: white; border-radius: 10px; padding: clamp(1.5rem,3vw,2.6rem); }
.study aside h2 { font-size: clamp(1.6rem,3vw,2.45rem); }
@media(max-width: 800px) {
    .intro, .study-body { grid-template-columns: minmax(0,1fr); gap: 1.2rem; }
    .study-body { padding-top: .75rem; } .contents { position: static; max-height: none; }
    .contents summary { padding: .7rem 0; }
    .study-plate img { max-height: 17rem; }
}
@media(max-width: 620px) {
    .gallery { grid-template-columns: minmax(0,1fr); }
    .intro h1 { font-size: clamp(2.4rem,9.5vw,3.4rem); }
}
body:has(dialog[open]) { overflow: hidden; }
dialog { border: 0; padding: .5rem; width: min(94vw, 96rem); max-width: 96vw; max-height: 96dvh; color: #142537; background: #192736; border-radius: .6rem; }
dialog::backdrop { background: #09111bf2; }
.viewer-toolbar { display: flex; justify-content: flex-end; gap: .5rem; margin-bottom: .5rem; }
.viewer-toolbar button { border: 0; border-radius: .3rem; padding: .65rem 1rem; min-height: 44px; font: inherit; font-weight: 600; cursor: pointer; }
.viewer-viewport { overflow: auto; max-height: calc(96dvh - 5.5rem); background: #fff; overscroll-behavior: contain; }
.viewer-viewport img { display: block; margin-inline: auto; max-width: 100%; max-height: calc(96dvh - 5.5rem); }
.viewer-viewport.original-size img { max-width: none; max-height: none; }
.viewer-viewport.original-size { cursor: grab; }
.viewer-viewport.dragging { cursor: grabbing; }