*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{
    background:none;color:#333;min-height:100vh;overflow-x:hidden;
}

.subtitle{font-size:.92rem;color:#888;margin:0 55px 28px}
.anatomy-subtitle{
    text-align:center;
	font-size: clamp(1.4rem, 2vw, 1.8rem);
	text-wrap: auto
}

.explorer-container{
    position:relative;width:100%;
    padding: 30px 20px 60px;
	overflow: visible;
}
.body-wrapper{
    position:relative;width:clamp(500px, 45vw, 750px); aspect-ratio:600/900; margin:0 auto; overflow:visible; 
}
.body-wrapper>svg{position:absolute;top:0;left:0;width:100%;height:100%;display:block}
.silhouette-layer{z-index:1}
.organ-layer{z-index:2}

.organ-group{cursor:pointer;transition:filter .25s}
.organ-group:hover{
    filter:brightness(1.15) saturate(1.3) drop-shadow(0 0 6px rgba(0,0,0,.2));
}
.hover-tooltip{
    position:fixed;padding:5px 12px;background:rgba(44,62,80,.9);color:#fff;
    border-radius:5px;font-size:.82rem;pointer-events:none;opacity:0;
    transition:opacity .2s;z-index:1000;white-space:nowrap;
}
.hover-tooltip.visible{opacity:1}

@keyframes organPulse{0%,100%{opacity:.88}50%{opacity:1}}
.organ-group .organ-art{animation:organPulse 3.5s ease-in-out infinite}

/* ── Connector line ────────────────────────────────────────────── */
.connector-svg{
    position:absolute;inset:0;pointer-events:none;z-index:50;
    overflow:visible;
}
.connector-svg line{
    stroke:#4460F1;stroke-width:2;stroke-dasharray:6 4;
    opacity:0;transition:opacity .35s;
}
.connector-svg.active line{opacity:1}

/* ── Inline popup — circle-first layout ────────────────────────── */
.inline-popup{
    position:absolute;
    opacity:0;pointer-events:none;
    transform:translateY(8px);
    transition:opacity .35s ease, transform .35s ease;
    z-index:100;
    overflow:visible;
	min-width:clamp(400px, 37vw, 840px);
}
.inline-popup.active{opacity:1;pointer-events:all;transform:translateY(0)}

/* The whole popup is a row: circle + text-bars */
.popup-row{
    display:flex;
    align-items:center;
    overflow:visible;
	width:100%;
}

/* ── Circle (hero element, closest to body) ────────────────────── */
.popup-circle-wrap{
    position:relative;
    width:clamp(100px, 17vw, 350px);height:clamp(100px, 17vw, 350px);
    flex-shrink:0;
    z-index:5;
}
.popup-circle{
    width:clamp(100px, 17vw, 350px);height:clamp(100px, 17vw, 350px);
    border-radius:50%;overflow:hidden;
}
.popup-circle img{width:100%;height:100%;object-fit:cover;display:block}
.popup-circle-placeholder{
    width:100%;height:100%;display:flex;align-items:center;justify-content:center;
    font-size:3.5rem;opacity:.3;background:linear-gradient(135deg,#e8d0ca,#d4b8b0);
}

/* ── Text bars (extend outward from circle) ────────────────────── */
.popup-text-bars{
    display:flex;flex-direction:column;
    gap:0;z-index:2;
    /* Overlap onto circle */
    position:relative;
    flex:1;
    min-width:0;
}

.popup-banner{
    padding:clamp(10px, 1.5vw, 14px) clamp(16px, 2.5vw, 28px) clamp(8px, 1.2vw, 12px);
    color:#fff;font-size:clamp(1rem, 1.5vw, 1.3rem);font-weight:700;
    letter-spacing:.3px;line-height:1.3;
    position:relative;
	width:100%;
}
	
.popup-desc-area{
    padding:clamp(8px, 1.2vw, 12px) clamp(16px, 2.5vw, 28px) clamp(10px, 1.5vw, 16px);
	position:relative;
	width:100%;
}
.popup-desc{font-size:clamp(0.8rem, 1.1vw, 1rem);line-height:1.5;color:#555}
.popup-desc a{color:#4460F1;text-decoration:underline}

.popup-close{
    position:absolute;
	width:30px;height:30px;
	color:#fff;font-size:30px;cursor:pointer;z-index:20;
    display:flex;align-items:center;justify-content:center;
    transition:all .2s;
}
.popup-close:hover{background:none;color:#fff;transform:scale(1.1)}

/* ── RIGHT side: circle left, bars extend right ────────────────── */
.inline-popup[data-side="right"] .popup-row{
    flex-direction:row;
}
.inline-popup[data-side="right"] .popup-text-bars{
    margin-left:clamp(-200px, -17vw, -80px);
    padding-left:clamp(120px, 14vw, 180px);
}
.inline-popup[data-side="right"] .popup-banner{
    border-radius:0 10px 0 0;
	padding-right:28px;
	padding-left:clamp(20px, 3vw, 40px);
	
 /*---why does changing this value not work?-----*/
}
.inline-popup[data-side="right"] .popup-desc-area{
    border-radius:0 0 10px 0;
	padding-left:clamp(20px, 3vw, 40px);
}
.inline-popup[data-side="right"] .popup-close{
    left: auto;   /* close button now on the LEFT (outer) edge */
    right: 10px;
	top: 10px;
}

/* ── LEFT side: bars extend left, circle right ─────────────────── */

.inline-popup[data-side="left"] .popup-row {
    flex-direction: row-reverse;  /* circle moves to right side */
}
.inline-popup[data-side="left"] .popup-text-bars {
    margin-right:clamp(-200px, -17vw, -80px);   /* overlap into circle from the left */
    padding-right:clamp(120px, 14vw, 180px);  /* text clears the circle edge */
    text-align: right;
}
.inline-popup[data-side="left"] .popup-banner {
    border-radius: 10px 0 0 0;
    padding-left: 28px;
    padding-right: clamp(20px, 3vw, 45px);
}
.inline-popup[data-side="left"] .popup-desc-area {
    border-radius: 0 0 0 10px;
	padding-right:clamp(20px, 3vw, 40px);
}
.inline-popup[data-side="left"] .popup-close {
    left: 10px;   /* close button now on the LEFT (outer) edge */
    right: auto;
	top: 10px;
}
	
/* ── Cell dots ─────────────────────────────────────────────────── */
.cell-dot{
    position:absolute;width:20px;height:20px;border-radius:50%;
    background:rgba(255,255,255,.9);border:2.5px solid #4460F1;
    cursor:pointer;transform:translate(-50%,-50%);
    transition:all .25s ease;z-index:5;
}
.cell-dot:hover{
    background:#4460F1;transform:translate(-50%,-50%) scale(1.3);
    box-shadow:0 0 12px rgba(68,96,241,.5);
	z-index:100;
}
.cell-dot::before{
    content:'';position:absolute;top:50%;left:50%;
    width:7px;height:7px;background:#4460F1;border-radius:50%;
    transform:translate(-50%,-50%);transition:background .2s;
}
.cell-dot:hover::before{background:#fff}

.cell-label{
    position:absolute;bottom:calc(100% + 10px);left:50%;
    transform:translateX(-50%) translateY(4px);
    background:#1a1a2e;color:#fff;padding:6px 12px;border-radius:7px;
    font-size:.75rem;font-weight:600;white-space:nowrap;
    opacity:0;pointer-events:none;transition:all .2s ease;
    box-shadow:0 3px 12px rgba(0,0,0,.25);
	}
.cell-label::after{
    content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
    border:5px solid transparent;border-top-color:#1a1a2e;
}
.cell-dot[data-edge="top"] .cell-label{
    bottom:auto;top:calc(100% + 10px);transform:translateX(-50%) translateY(-4px);
}
.cell-dot[data-edge="top"] .cell-label::after{
    top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#1a1a2e;
}
.cell-dot.active .cell-label,.cell-dot:hover .cell-label{
    opacity:1;transform:translateX(-50%) translateY(0);
}
.cell-dot.active{background:#4460F1;box-shadow:0 0 12px rgba(68,96,241,.4);z-index:100}
.cell-dot.active::before{background:#fff}
	
.organ-marker{
	pointer-events:none;
}

	/* ── HTML organ labels (replaces SVG text) ─────────────────────── */
.organ-label{
    position:absolute;
    transform:translate(-50%, 0);    /* centre horizontally on the point */
    z-index:10;
    cursor:pointer;
    pointer-events:auto;
    text-align:center;
    max-width:200px;                 /* wrap long names */
	white-space:normal;        /* ★ allow wrapping */
    overflow:visible; !important
}

.organ-label p{
    margin:0;
    font-size:clamp(0.7rem, 1.2vw, 1.2rem);  /* responsive text size */
    font-weight:500;
    color:#444;
    line-height:1.4;
    background:rgba(255,255,255,0.85);
    padding:2px 8px;
    border-radius:4px;
    display:inline-block;
	white-space: normal;
	max-width:200px;
}

.organ-label:hover p{
    color:#4460F1;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media(max-width:1100px){
    .body-wrapper{width:min(500px,80vw)}
	.organ-group text{font-size: 15px !important;}
	
	.inline-popup{
        position:fixed !important;top:50% !important;left:50% !important;
        right:auto !important;
        transform:translate(-50%,-50%) translateY(8px) !important;
        z-index:1000;
    }
    .inline-popup.active{
        transform:translate(-50%,-50%) translateY(0) !important;
    }
    .inline-popup[data-side="right"] .popup-row,
    .inline-popup[data-side="left"] .popup-row{
        flex-direction:column;align-items:center;
    }
    .inline-popup[data-side="right"] .popup-text-bars,
    .inline-popup[data-side="left"] .popup-text-bars{
        margin:0;padding:0;text-align:center;
    }
    .popup-circle-wrap,.popup-circle{width:220px;height:220px}
    .popup-text-bars{margin-top:-30px !important;padding-top:40px !important}
    .popup-banner{border-radius:0 !important}
    .popup-desc-area{border-radius:0 0 0 0 !important;max-width:none}
    .popup-close{right:4px !important;left:auto !important; bottom:4px !important; top:auto !important;}
	.connector-svg,
    .connector-svg.active{
        display:none !important;
    }
    .mobile-backdrop{
        position:fixed;inset:0;background:rgba(0,0,0,.4);
        z-index:999;opacity:0;pointer-events:none;transition:opacity .3s;
    }
    .mobile-backdrop.active{opacity:1;pointer-events:all}
	 .organ-label p{
       font-size:0.75rem;}
		 
 	.anatomy-subtitle{max-width:800px;font-size:1.2rem}

	}