.nkm-hero-visual { position: relative; min-width: 0; min-height: 390px; overflow: hidden; isolation: isolate; }
.nkm-village, .nkm-child { position: absolute; z-index: 2; display: grid; place-items: center; text-align: center; border-radius: 50%; }
.nkm-village { top: 50%; width: 142px; height: 142px; transform: translateY(-50%); color: #fff8dc; background: linear-gradient(145deg, var(--wine-800), var(--wine-950)); border: 2px solid var(--gold-300); box-shadow: 0 20px 36px rgba(67, 4, 0, .28); }
.nkm-village small, .nkm-child small { font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.nkm-village strong { font-size: 1.35rem; }
.nkm-village span { max-width: 105px; color: #f5d9a0; font-size: .67rem; line-height: 1.3; }
.village-a { left: 9%; }
.village-b { right: 9%; }
.nkm-child { left: 50%; top: 50%; width: 168px; height: 168px; transform: translate(-50%, -50%); color: var(--wine-950); background: radial-gradient(circle at 35% 30%, #fff7d4, var(--gold-300)); border: 5px solid rgba(255,255,255,.76); box-shadow: 0 0 0 12px rgba(255,204,61,.12), 0 24px 50px rgba(52,5,0,.35); }
.nkm-child strong { font-size: 1.65rem; letter-spacing: .04em; }
.nkm-child span { font-size: .72rem; font-weight: 700; }
.nkm-links { position: absolute; inset: 12% 3% 15%; width: 94%; height: 73%; }
.nkm-links path { fill: none; stroke: rgba(255,224,138,.48); stroke-width: 2.5; stroke-dasharray: 7 8; animation: nkm-flow 7s linear infinite; }
@keyframes nkm-flow { to { stroke-dashoffset: -90; } }
.nkm-reframe-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; margin-top: 18px; }
.nkm-reframe-card { padding: 26px; border: 1px solid var(--cream-300); border-radius: 10px; }
.nkm-reframe-card span, .nkm-session-detail > span { color: var(--wine-800); font-size: .72rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.nkm-reframe-card h3, .nkm-session-detail h3 { margin: 12px 0 8px; color: var(--wine-950); font-size: 1.35rem; }
.nkm-reframe-card p, .nkm-session-detail p { margin: 0; color: var(--muted); line-height: 1.62; }
.nkm-old { background: #fffaf0; }
.nkm-new { color: #fff8dc; background: linear-gradient(135deg, var(--wine-800), var(--wine-950)); border-color: var(--wine-900); }
.nkm-new span, .nkm-new h3 { color: var(--gold-300); }
.nkm-new p { color: #f4dab0; }
.nkm-reframe-shift { display: grid; place-items: center; color: var(--wine-800); font-size: 2rem; }
.nkm-compass { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 18px; }
.nkm-compass button { display: grid; gap: 8px; min-height: 96px; padding: 14px 10px; color: var(--wine-950); text-align: left; background: #fffaf0; border: 1px solid var(--cream-300); border-radius: 8px; }
.nkm-compass button span, .nkm-protocol-steps button span { color: #a36b39; font-size: .7rem; font-weight: 900; }
.nkm-compass button strong { font-size: .82rem; }
.nkm-compass button:hover, .nkm-compass button[aria-pressed="true"] { color: #fff8dc; background: linear-gradient(145deg, var(--wine-800), var(--wine-950)); border-color: var(--wine-900); transform: translateY(-2px); }
.nkm-compass button[aria-pressed="true"] span { color: var(--gold-300); }
.nkm-compass-detail { margin-top: 12px; }
.nkm-protocol { display: grid; grid-template-columns: minmax(260px,.8fr) minmax(0,1.2fr); gap: 20px; padding: 34px; color: #fff8dc; background: radial-gradient(circle at 15% 10%, rgba(255,204,61,.18), transparent 30%), linear-gradient(135deg,var(--wine-900),var(--wine-950)); border: 1px solid rgba(255,224,138,.35); border-radius: 12px; box-shadow: 0 18px 34px rgba(91,19,6,.15); }
.nkm-protocol-copy h2 { margin: 9px 0 12px; color: #fff8dc; font-size: clamp(1.8rem,3vw,2.7rem); line-height: 1.05; }
.nkm-protocol-copy p { color: #f5d9a0; line-height: 1.55; }
.nkm-protocol .wbv-tags span { color: #fff0c6; background: rgba(255,255,255,.08); border-color: rgba(255,224,138,.32); }
.nkm-protocol-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.nkm-protocol-steps button { display: grid; align-content: start; gap: 7px; min-height: 132px; padding: 15px 12px; color: #fff8dc; text-align: left; background: rgba(255,255,255,.06); border: 1px solid rgba(255,224,138,.24); border-radius: 8px; }
.nkm-protocol-steps button strong { font-size: .84rem; }
.nkm-protocol-steps button small { color: #eecf9e; line-height: 1.3; }
.nkm-protocol-steps button:hover, .nkm-protocol-steps button[aria-pressed="true"] { background: var(--gold-300); color: var(--wine-950); transform: translateY(-2px); }
.nkm-protocol-steps button[aria-pressed="true"] small { color: var(--wine-800); }
.nkm-session-detail { grid-column: 2; padding: 18px 20px; background: #fffaf0; border-radius: 8px; }
.nkm-evidence { margin-top: 22px; }
.nkm-gallery { overflow: hidden; }
.nkm-gallery .wbv-diagram-selector { grid-template-columns: 1fr; }
.nkm-gallery .wbv-diagram-selector button { min-width: 0; }
.nkm-gallery .wbv-diagram-selector img { aspect-ratio: 16/9; object-fit: cover; object-position: center; }
.nkm-gallery .wbv-viewer { display: flex; flex-direction: column; height: auto; }
.nkm-gallery .wbv-gallery-stage { flex: 0 0 auto; min-height: 0; height: auto; max-height: none; overflow: hidden; background: #fffaf0; }
.nkm-gallery .wbv-gallery-stage.is-zoomed { overflow: auto; }
.nkm-gallery .wbv-gallery-visual { min-width: 100%; height: auto; }
.nkm-gallery .wbv-art-button { display: block; width: 100%; height: auto; padding: 8px; }
.nkm-gallery .wbv-art-button img { display: block; width: 100%; min-width: 0; height: auto; transform-origin: top left; transition: width .2s ease; }
.nkm-gallery .wbv-viewer-toolbar { position: sticky; top: 0; z-index: 3; }
@media (max-width: 980px) { .nkm-compass { grid-template-columns: repeat(3,1fr); } .nkm-protocol { grid-template-columns: 1fr; } .nkm-session-detail { grid-column: 1; } }
@media (max-width: 800px) { .nkm-gallery .wbv-diagram-selector { grid-template-columns: 1fr; } .nkm-gallery .wbv-diagram-selector img { height: 92px; } .nkm-gallery .wbv-viewer { height: auto; } }
@media (max-width: 680px) { .nkm-hero-visual { min-height: 470px; } .nkm-village { top: 18%; width: 120px; height: 120px; transform: none; } .village-a { left: 8%; } .village-b { right: 8%; } .nkm-child { top: 63%; } .nkm-links { display: none; } .nkm-reframe-grid { grid-template-columns: 1fr; } .nkm-reframe-shift { transform: rotate(90deg); } .nkm-compass { grid-template-columns: repeat(2,1fr); } .nkm-protocol { padding: 22px 16px; } .nkm-protocol-steps { grid-template-columns: repeat(2,1fr); } }
