:root { color-scheme:light; --bg:#f8fafb; --surface:#fff; --surface-2:#f2f5f6; --text:#18212b; --text-muted:#52606d; --border:#dce3e7; --accent:#155e75; --focus:#147d9a; }
* { box-sizing:border-box; }
body { margin:0; padding:20px; background:var(--surface); color:var(--text); font:16px/1.6 "Segoe UI",Arial,sans-serif; }
main { max-width:980px; margin:auto; }
h1 { margin:0 0 8px; font-size:1.5rem; line-height:1.3; }
h2 { margin:0; font-size:1.125rem; line-height:1.4; }
p { margin:0; }
.intro,.note { color:var(--text-muted); }
.spread { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:24px; }
.panel { min-width:0; }
.panel + .panel { border-left:1px solid var(--border); padding-left:20px; }
.heading { min-height:99px; }
.category { color:var(--accent); margin-bottom:6px; font-size:.9375rem; font-weight:650; }
.visual { height:310px; display:flex; align-items:center; justify-content:center; position:relative; margin:8px 0 14px; }
.visual > img { height:100%; width:100%; object-fit:contain; }
.visual > .postures { max-height:310px; object-fit:cover; }
.view-note { position:absolute; top:0; left:0; right:0; color:var(--text-muted); font-size:.9375rem; line-height:1.35; background:var(--surface); }
.view-label { position:absolute; bottom:0; background:var(--surface); color:var(--text-muted); font-size:.9375rem; line-height:1.35; padding-top:4px; }
.detail-view { left:0; width:57%; }
.whole-view { right:0; width:42%; }
.bone-scene > img { height:230px; align-self:flex-start; object-position:center top; }
.inset { position:absolute; right:0; bottom:0; width:min(150px,100%); height:135px; display:grid; grid-template-rows:minmax(0,1fr) auto; background:var(--surface); border:1px solid var(--border); border-radius:4px; overflow:hidden; }
.inset img { display:block; width:100%; height:100%; object-fit:cover; }
.inset-label { display:block; padding:2px 5px; font-size:.9375rem; line-height:1.4; color:var(--text-muted); }
.image-label { display:flex; align-items:center; gap:7px; min-height:49px; margin:0 0 10px; color:var(--accent); font-weight:600; font-size:.9375rem; line-height:1.4; }
.zone { flex:0 0 13px; width:13px; height:13px; border:1px solid #52606d; border-radius:2px; background:#b69f85; }
.note { margin-top:24px; padding-top:16px; border-top:1px solid var(--border); font-size:.9375rem; }
.sources { display:flex; flex-wrap:wrap; gap:0 16px; margin:8px 0; }
a { color:var(--accent); text-underline-offset:3px; overflow-wrap:anywhere; display:inline-flex; align-items:center; min-height:44px; }
a:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
@media(max-width:580px) { body { padding:16px; } .spread { grid-template-columns:1fr; gap:26px; } .panel + .panel { padding-left:0; border-left:0; padding-top:22px; border-top:1px solid var(--border); } .heading { min-height:0; } .visual { height:330px; margin-top:14px; } .visual > .postures { max-height:330px; object-fit:contain; } .image-label { min-height:0; } .inset { right:max(0px,calc(50% - 110px)); bottom:0; } }