/*!
 * Dr Hoa — Integrated Pain Medicine interactive system.
 * Loaded after home.css on the front page. Component-scoped styles only.
 */

/* --------------------------------------------------------------------------
 * 02 Five domains. One clinical picture. — interactive system.
 * Construction study, five-pointed relationship star, ten explorable
 * arcs, domain nodes and a three-state reading panel.
 * ----------------------------------------------------------------------- */

.ipm-section {
	--ipm-stage-size: 300px;
	--ipm-panel-size: 280px;
	--ipm-diagram-size: 270px;
	--ipm-node-size: 92px;
	--ipm-label-inset: 15px 10px;
	--ipm-label-size: 9.5px;
	--ipm-column-gap: 24px;
	display: block;
	padding: 48px var(--gutter) 44px;
	overflow: clip;
}

/* Vertical construction rail under the "2" marker, matching section 01. */
.ipm-section::before {
	content: "";
	position: absolute;
	left: calc(var(--gutter) + 19px);
	top: 104px;
	bottom: 46px;
	width: 1px;
	background: repeating-linear-gradient(180deg, rgba(180, 146, 79, .34) 0 3px, transparent 3px 9px);
	-webkit-mask-image: linear-gradient(180deg, #000 0, #000 78%, transparent);
	mask-image: linear-gradient(180deg, #000 0, #000 78%, transparent);
	opacity: .48;
	z-index: 0;
	pointer-events: none;
}

.ipm-head {
	grid-column: 1 / 3;
	grid-row: 1;
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	column-gap: var(--ipm-column-gap);
	align-items: start;
}

.ipm-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 38px minmax(260px, 3fr) minmax(0, 7fr);
	grid-template-rows: auto minmax(0, 1fr);
	column-gap: var(--ipm-column-gap);
	height: var(--ipm-stage-size);
	align-items: start;
}

.ipm-head .num {
	grid-column: 1;
	grid-row: 1;
}

.ipm-head .section-title {
	grid-column: 2;
	grid-row: 1;
	align-self: start;
	margin: 0;
	font-size: 1.375rem;
	line-height: 1.12;
	white-space: nowrap;
}

.ipm-grid > * {
	min-width: 0;
}

/* Diagram stage — the interactive instrument sits over a continuation of
   the site's five-sphere construction language. */
.ipm-diagram-wrap {
	position: relative;
	grid-column: 2;
	grid-row: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 0;
	isolation: isolate;
}

.ipm-atmosphere {
	position: absolute;
	inset: 4px -26px;
	z-index: -1;
	width: calc(100% + 52px);
	height: calc(100% - 8px);
	overflow: visible;
	pointer-events: none;
	opacity: .68;
	-webkit-mask-image: radial-gradient(ellipse at 48% 50%, #000 35%, rgba(0, 0, 0, .72) 64%, transparent 92%);
	mask-image: radial-gradient(ellipse at 48% 50%, #000 35%, rgba(0, 0, 0, .72) 64%, transparent 92%);
}

.ipm-atmosphere-fill { stroke: none; }
.ipm-atmosphere-fill--gold { fill: rgba(180, 146, 79, .055); }
.ipm-atmosphere-fill--gold-soft { fill: rgba(180, 146, 79, .038); }
.ipm-atmosphere-fill--teal { fill: rgba(47, 94, 92, .045); }
.ipm-atmosphere-fill--teal-soft { fill: rgba(47, 94, 92, .032); }

.ipm-atmosphere-drawing {
	fill: none;
	stroke: var(--gold);
	stroke-width: .65;
	stroke-dasharray: 2 6;
	opacity: .42;
	vector-effect: non-scaling-stroke;
}

.ipm-atmosphere-meridian {
	stroke: var(--teal-deep);
	stroke-width: .5;
	stroke-dasharray: 1 6;
	opacity: .52;
}

.ipm-atmosphere-axis {
	stroke-width: .5;
	stroke-dasharray: 1 9;
	opacity: .6;
}

.ipm-atmosphere-axis--vertical {
	opacity: .38;
}

.ipm-shell {
	position: relative;
	width: min(100%, var(--ipm-diagram-size));
	aspect-ratio: 1;
	margin: 0;
	isolation: isolate;
	filter: drop-shadow(0 18px 42px rgba(31, 68, 66, .045));
}

.ipm-shell::before {
	content: "";
	position: absolute;
	inset: 22px;
	border: .5px solid rgba(180, 146, 79, .2);
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 50%, rgba(180, 146, 79, .055), transparent 38%),
		radial-gradient(circle at 50% 50%, transparent 0 66%, rgba(180, 146, 79, .045) 66.4%, transparent 67%),
		rgba(250, 247, 242, .26);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, .58),
		inset 0 18px 44px rgba(31, 68, 66, .014),
		0 0 0 1px rgba(180, 146, 79, .055);
	pointer-events: none;
}

.ipm-shell::after {
	content: "";
	position: absolute;
	inset: 70px;
	border: .5px dotted rgba(180, 146, 79, .24);
	border-radius: 50%;
	box-shadow: 0 0 0 52px rgba(250, 247, 242, .018), inset 0 0 0 52px rgba(250, 247, 242, .02);
	pointer-events: none;
}

.ipm-diagram {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: auto;
}

/* Construction line work — non-scaling strokes keep the hairlines crisp. */
.ipm-construction { fill: none; stroke: var(--gold); stroke-width: .48; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1.5 5; opacity: .2; vector-effect: non-scaling-stroke; }
.ipm-construction--teal { stroke: var(--teal-deep); opacity: .105; stroke-dasharray: 1 7; }
.ipm-guide { fill: none; stroke: var(--gold); stroke-width: .5; stroke-dasharray: 1 4; stroke-linecap: round; opacity: .26; vector-effect: non-scaling-stroke; }
.ipm-guide--soft { opacity: .17; stroke-dasharray: 1 7; }
.ipm-guide--inner { opacity: .22; stroke-dasharray: 1 5; }
.ipm-orbit { fill: none; stroke: var(--teal-deep); stroke-width: .5; stroke-dasharray: 1 5; opacity: .16; vector-effect: non-scaling-stroke; }
.ipm-spoke { stroke: rgba(180, 146, 79, .34); stroke-width: .5; stroke-dasharray: 1 9; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ipm-tick { stroke: var(--gold); stroke-width: .9; stroke-linecap: round; opacity: .24; vector-effect: non-scaling-stroke; }
.ipm-tick--major { opacity: .46; }
.ipm-tick--micro { stroke-width: .75; opacity: .19; }
.ipm-anchor { fill: var(--ivory); stroke: var(--gold); stroke-width: .75; opacity: .38; vector-effect: non-scaling-stroke; }

/* The five-pointed relationship star. */
.ipm-star-underlay {
	fill: none;
	stroke: var(--ivory);
	stroke-width: 5;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: .82;
	vector-effect: non-scaling-stroke;
}

.ipm-star {
	fill: none;
	stroke: var(--gold);
	stroke-width: .95;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 5 5;
	opacity: .62;
	filter: drop-shadow(0 1px 0 rgba(250, 247, 242, .75)) drop-shadow(0 0 8px rgba(180, 146, 79, .16));
	vector-effect: non-scaling-stroke;
}

.ipm-star--secondary {
	stroke: var(--teal-deep);
	stroke-width: .55;
	stroke-dasharray: 1 7;
	opacity: .22;
}

.ipm-star-joint {
	fill: var(--ivory);
	stroke: var(--gold);
	stroke-width: .75;
	opacity: .58;
	vector-effect: non-scaling-stroke;
}

/* The ten explorable arcs and their midpoint markers. */
.ipm-relationship {
	fill: none;
	stroke: rgba(31, 68, 66, .62);
	stroke-width: .65;
	stroke-dasharray: 1.5 5;
	stroke-linecap: round;
	opacity: .22;
	vector-effect: non-scaling-stroke;
	transition: opacity .45s ease, stroke .45s ease, stroke-width .45s ease;
}

.ipm-relationship-layer,
.ipm-marker-layer {
	pointer-events: none;
}

.ipm-relationship-hit {
	fill: none;
	stroke: rgba(255, 255, 255, .001);
	stroke-width: 20;
	pointer-events: stroke;
	cursor: pointer;
}

.ipm-hit-layer {
	pointer-events: stroke;
}

.ipm-relationship.is-related { stroke: var(--gold); stroke-width: 1.15; stroke-dasharray: 4 3; opacity: .72; }
.ipm-relationship.is-preview { stroke: var(--gold); stroke-width: 1.25; stroke-dasharray: 4 2; opacity: .84; }
.ipm-relationship.is-selected { stroke: var(--teal-deep); stroke-width: 1.5; stroke-dasharray: none; opacity: 1; }
.ipm-relationship.is-dimmed { opacity: .25; }

.ipm-marker {
	fill: var(--gold);
	stroke: var(--ivory);
	stroke-width: 2;
	opacity: 0;
	filter: drop-shadow(0 0 5px rgba(180, 146, 79, .28));
	transition: opacity .45s ease;
}

.ipm-marker.is-active {
	opacity: 1;
}

.ipm-center-ring { fill: none; stroke: rgba(180, 146, 79, .18); stroke-width: .5; stroke-dasharray: 1 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.ipm-center-title {
	font-family: var(--font-serif);
	font-size: 48px;
	fill: var(--gold);
	font-weight: 500;
	font-style: italic;
	letter-spacing: .015em;
}

/* Domain nodes — translucent teal spheres using the established layered
   drawing language, with enough contrast for interactive labels. */
.ipm-node {
	position: absolute;
	width: var(--ipm-node-size);
	height: var(--ipm-node-size);
	translate: -50% -50%;
	border: 0;
	border-radius: 50%;
	padding: 0;
	background: transparent;
	color: var(--paper);
	cursor: pointer;
	font: inherit;
	transform: translateZ(0) scale(1);
	filter: drop-shadow(0 10px 18px rgba(31, 68, 66, .1));
	z-index: 2;
	transition: transform .62s var(--ease-out-soft), opacity .5s var(--ease-out-soft), filter .5s var(--ease-out-soft);
}

.ipm-node[data-domain-id="nervous-system"] { left: 50%; top: 14.1%; }
.ipm-node[data-domain-id="mechanics-motor"] { left: 84.2%; top: 38.9%; }
.ipm-node[data-domain-id="fascia-fluid-lymphatics"] { left: 71.1%; top: 79.2%; }
.ipm-node[data-domain-id="visceral-metabolic"] { left: 28.9%; top: 79.2%; }
.ipm-node[data-domain-id="biological-memory"] { left: 15.8%; top: 38.9%; }

.ipm-node:focus-visible {
	outline: 1.5px solid var(--teal-deep);
	outline-offset: 8px;
}

.ipm-node-art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.ipm-node-base {
	opacity: .98;
	transition: opacity .55s ease;
}

.ipm-sphere-stop--surface { stop-color: var(--teal); stop-opacity: .92; }
.ipm-sphere-stop--teal { stop-color: var(--teal); stop-opacity: .96; }
.ipm-sphere-stop--deep { stop-color: var(--teal-deep); stop-opacity: .98; }
.ipm-sphere-stop--edge { stop-color: var(--teal-deep); stop-opacity: 1; }

.ipm-node-glaze { fill: rgba(47, 94, 92, .08); transition: fill .55s var(--ease-out-soft); }
.ipm-node-glaze--gold { fill: rgba(180, 146, 79, .045); transition: fill .55s var(--ease-out-soft); }
.ipm-node-glaze--inner { fill: rgba(250, 247, 242, .02); transition: fill .55s var(--ease-out-soft); }

.ipm-node-outline {
	fill: none;
	stroke: var(--gold);
	stroke-width: .8;
	stroke-dasharray: 2 5;
	stroke-linecap: round;
	opacity: .68;
	vector-effect: non-scaling-stroke;
	transition: opacity .55s ease, stroke .55s ease;
}

.ipm-node-outline--fine {
	stroke: var(--paper);
	stroke-width: .45;
	stroke-dasharray: 1 4;
	opacity: .27;
}

.ipm-node-meridian {
	fill: none;
	stroke: var(--paper);
	stroke-width: .5;
	stroke-dasharray: 1 4;
	opacity: .28;
	vector-effect: non-scaling-stroke;
}

.ipm-node-meridian--vertical { opacity: .2; }

/* Gold confirmation ring, revealed on hover/preview/selection. */
.ipm-node::after {
	content: "";
	position: absolute;
	inset: -6px;
	border: 1px solid var(--gold);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	transform: scale(.86) rotate(-12deg);
	transition: opacity .6s var(--ease-out-soft), transform .6s var(--ease-out-soft);
}

.ipm-node-label {
	position: absolute;
	inset: var(--ipm-label-inset);
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--paper);
	font-family: var(--font-serif);
	font-size: var(--ipm-label-size);
	font-style: italic;
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: .015em;
	text-align: center;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .18), 0 7px 18px rgba(9, 29, 28, .3);
	transition: color .6s var(--ease-out-soft), transform .6s var(--ease-out-soft), opacity .6s var(--ease-out-soft);
}

.ipm-node:is(.is-preview, .is-selected, .is-pair) {
	transform: translateZ(0) scale(1.045);
	filter: drop-shadow(0 14px 24px rgba(31, 68, 66, .2));
}

.ipm-node:is(.is-preview, .is-selected, .is-pair) .ipm-node-glaze { fill: rgba(47, 94, 92, .16); }
.ipm-node:is(.is-preview, .is-selected, .is-pair) .ipm-node-glaze--gold { fill: rgba(180, 146, 79, .14); }
.ipm-node:is(.is-preview, .is-selected, .is-pair) .ipm-node-glaze--inner { fill: rgba(250, 247, 242, .045); }
.ipm-node:is(.is-preview, .is-selected, .is-pair) .ipm-node-outline { opacity: .95; }

.ipm-node:is(.is-preview, .is-selected, .is-pair) .ipm-node-label {
	color: var(--paper);
	transform: scale(1.015);
}

.ipm-node:is(.is-preview, .is-selected, .is-pair)::after {
	opacity: 1;
	transform: scale(1.02) rotate(8deg);
}

.ipm-node.is-dimmed {
	opacity: .38;
}

/* Floating relationship label following the previewed arc. */
.ipm-floating-label {
	position: absolute;
	left: 50%;
	top: 50%;
	max-width: 180px;
	padding: 6px 9px;
	border: 1px solid rgba(228, 222, 212, .92);
	background: var(--ivory);
	color: var(--charcoal);
	font-size: 9px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -50%);
	transition: all .5s var(--ease-out-soft);
	box-shadow: 0 0 0 5px var(--ivory), 0 8px 20px rgba(31, 68, 66, .06);
	z-index: 4;
}

.ipm-floating-label.is-visible {
	opacity: 1;
}

/* Reading panel — a restrained manuscript plate, beginning near the 70%
   measure of the section. Content still scrolls within the fixed stage. */
.ipm-panel {
	position: relative;
	grid-column: 3;
	grid-row: 1 / 3;
	height: var(--ipm-panel-size);
	align-self: start;
	border: 1px solid rgba(228, 222, 212, .88);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, .42), rgba(250, 247, 242, .2)),
		var(--ivory);
	padding: 20px 26px 18px 30px;
	overflow: hidden;
	scroll-margin-top: calc(var(--header-h) + 14px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62);
}

.ipm-panel::before,
.ipm-panel::after {
	content: "";
	position: absolute;
	inset: 8px;
	pointer-events: none;
}

.ipm-panel::before {
	background:
		linear-gradient(var(--gold), var(--gold)) left top / 18px 1px no-repeat,
		linear-gradient(var(--gold), var(--gold)) left top / 1px 18px no-repeat,
		linear-gradient(var(--sketch), var(--sketch)) right bottom / 18px 1px no-repeat,
		linear-gradient(var(--sketch), var(--sketch)) right bottom / 1px 18px no-repeat;
	opacity: .46;
}

.ipm-panel::after {
	left: -5px;
	top: 50%;
	right: auto;
	bottom: auto;
	width: 9px;
	height: 9px;
	border: 1px solid var(--gold);
	border-radius: 50%;
	background: var(--ivory);
	opacity: .62;
	transform: translateY(-50%);
}

.ipm-panel-inner {
	height: 100%;
	overflow: auto;
	padding: 0 8px 0 0;
	scrollbar-gutter: stable;
	scrollbar-width: thin;
	scrollbar-color: rgba(180, 146, 79, .45) transparent;
	opacity: 1;
	transform: translateY(0);
	transition: opacity .24s cubic-bezier(.25, 1, .5, 1), transform .24s cubic-bezier(.25, 1, .5, 1);
}

.ipm-view {
	display: none;
	max-width: 760px;
}

.ipm-panel-inner.is-updating {
	opacity: 0;
	transform: translateY(5px);
}

.ipm-panel-inner::-webkit-scrollbar { width: 5px; }
.ipm-panel-inner::-webkit-scrollbar-thumb { background: rgba(180, 146, 79, .42); border-radius: 999px; }

.ipm-view.is-current {
	display: block;
}

.ipm-view[data-panel="overview"].is-current {
	display: block;
}

.ipm-view[data-panel="overview"] > .ipm-body:last-child {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px dashed var(--sketch-soft);
	color: var(--teal-deep);
	font-weight: 700;
}

.ipm-view[data-panel="overview"] .ipm-body {
	margin-top: 10px;
	font-size: 12px;
	line-height: 1.55;
}

.ipm-view[data-panel="overview"] > .ipm-body:first-child {
	margin-top: 0;
}

.ipm-view[data-panel="overview"] .ipm-list {
	margin-top: 10px;
	gap: 5px;
}

.ipm-view[data-panel="overview"] .ipm-list li {
	font-size: 11.5px;
	line-height: 1.45;
}

.ipm-eyebrow {
	margin: 0;
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gold);
	font-weight: 700;
}

.ipm-heading {
	margin: 8px 0 0;
	font-family: var(--font-serif);
	font-size: 27px;
	line-height: 1.14;
	font-weight: 500;
	color: var(--charcoal);
}

.ipm-kicker {
	display: flex;
	align-items: baseline;
	gap: 14px;
}

.ipm-kicker-number {
	font-family: var(--font-serif);
	font-size: 29px;
	color: var(--gold);
	font-weight: 500;
}

.ipm-body {
	margin: 13px 0 0;
	font-size: 12.5px;
	line-height: 1.66;
	color: var(--charcoal);
}

.ipm-list {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 7px;
}

.ipm-list li {
	position: relative;
	padding-left: 17px;
	font-size: 12px;
	line-height: 1.56;
}

.ipm-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--teal);
}

.ipm-subheading {
	margin: 18px 0 0;
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--charcoal);
	font-weight: 700;
}

/* Relationship shortcuts inside a domain view. */
.ipm-rel-controls {
	margin-top: 15px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.ipm-rel-button,
.ipm-action {
	min-height: 40px;
	border: 1px solid rgba(228, 222, 212, .92);
	background: rgba(255, 255, 255, .56);
	color: var(--teal-deep);
	padding: 8px 11px;
	text-align: left;
	font: inherit;
	font-size: 11px;
	line-height: 1.35;
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
	transition: border-color .45s var(--ease-out-soft), background .45s var(--ease-out-soft), color .45s var(--ease-out-soft), transform .45s var(--ease-out-soft);
}

.ipm-rel-button:is(:hover, [aria-pressed="true"]),
.ipm-action:hover {
	border-color: var(--teal);
	background: var(--teal-tint);
}

:is(.ipm-rel-button, .ipm-action):focus-visible {
	outline: 2px solid var(--teal-deep);
	outline-offset: 3px;
}

.ipm-rel-button b {
	font-family: var(--font-serif);
	font-size: 16px;
	color: var(--gold);
	font-weight: 500;
	margin-right: 8px;
}

/* Context chips naming the pair inside a relationship view. */
.ipm-context {
	margin-top: 12px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.ipm-context span {
	border: 1px solid var(--rule);
	background: var(--paper);
	padding: 5px 8px;
	font-size: 10px;
	color: var(--teal-deep);
}

.ipm-actions {
	margin-top: 15px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.ipm-panel-link {
	display: inline-flex;
	margin-top: 15px;
	font-size: 11px;
	font-weight: 700;
	color: var(--teal-deep);
}

/* No-JS fallback — hidden once home.js takes over. */
.ipm-fallback {
	margin-top: 24px;
	border-top: 1px solid var(--rule);
	padding-top: 22px;
}

.ipm-section.ipm-js .ipm-fallback {
	display: none;
}

.ipm-fallback-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.ipm-fallback h3 {
	font-family: var(--font-serif);
	font-size: 18px;
	font-weight: 500;
	margin: 0 0 10px;
}

.ipm-fallback ol,
.ipm-fallback ul {
	margin: 0;
	padding-left: 18px;
}

.ipm-fallback li {
	font-size: 12px;
	line-height: 1.55;
	margin-bottom: 7px;
}

/* Responsive. */
@media (max-width: 1180px) {
	.ipm-section {
		--ipm-stage-size: 290px;
		--ipm-panel-size: 270px;
		--ipm-diagram-size: 258px;
		--ipm-node-size: 84px;
		--ipm-label-inset: 14px 9px;
		--ipm-label-size: 9px;
	}

	.ipm-grid {
		grid-template-columns: 38px minmax(230px, 3fr) minmax(0, 7fr);
		column-gap: var(--ipm-column-gap);
	}

	.ipm-head .section-title { white-space: normal; }
	.ipm-panel { padding: 18px 20px 17px 24px; }
}

@media (max-width: 1024px) {
	.ipm-section {
		--ipm-stage-size: 280px;
		--ipm-panel-size: 260px;
		--ipm-diagram-size: 240px;
		--ipm-node-size: 78px;
		--ipm-label-inset: 13px 8px;
		--ipm-label-size: 8.4px;
	}

	.ipm-grid {
		grid-template-columns: 38px minmax(210px, 3fr) minmax(0, 7fr);
		column-gap: var(--ipm-column-gap);
	}

	.ipm-heading { font-size: 22px; }
}

@media (max-width: 768px) {
	.ipm-section {
		--ipm-stage-size: 520px;
		--ipm-diagram-size: 520px;
		--ipm-node-size: 128px;
		--ipm-label-inset: 22px 16px;
		--ipm-label-size: 11.5px;
		padding: 28px 20px 32px;
	}

	.ipm-section::before {
		display: none;
	}

	.ipm-head {
		display: block;
		grid-column: 1;
		grid-row: auto;
	}

	.ipm-head .num {
		display: none;
	}

	.ipm-head .section-title {
		margin-bottom: 0;
	}

	.ipm-grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap: 26px;
		height: auto;
		align-items: start;
	}

	.ipm-diagram-wrap {
		grid-column: 1;
		grid-row: auto;
		height: auto;
		min-height: 0;
	}

	.ipm-atmosphere {
		inset: -28px -24px -32px;
		width: calc(100% + 48px);
		height: calc(100% + 60px);
		opacity: .5;
	}

	.ipm-node-label { line-height: 1.05; }

	.ipm-panel {
		grid-column: 1;
		grid-row: auto;
		height: auto;
		min-height: 0;
		max-height: none;
		padding: 24px 20px;
	}

	.ipm-panel::after { display: none; }

	.ipm-panel-inner {
		overflow: visible;
		max-height: none;
	}

	.ipm-rel-controls { grid-template-columns: 1fr; }

}

@media (max-width: 480px) {
	.ipm-section {
		--ipm-stage-size: 360px;
		--ipm-diagram-size: 360px;
		--ipm-node-size: 100px;
		--ipm-label-inset: 17px 12px;
		--ipm-label-size: 9.6px;
	}

	.ipm-node-label { line-height: 1.02; }
	.ipm-heading { font-size: 24px; }
	.ipm-body { font-size: 12px; line-height: 1.68; }
	.ipm-fallback-grid { grid-template-columns: 1fr; }
}