.CalculatorsHeader,
.CalculatorPageHeader {
	max-width: 920px;
}

.CalculatorToolGrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--SpaceM);
}

.CalculatorToolCard {
	min-height: 12rem;
}

.CalculatorToolCardPrimary {
	background:
		linear-gradient(180deg, rgba(22, 127, 133, 0.12), rgba(255, 255, 255, 0.82)),
		var(--ColorSurface);
}

.VolumeCalculator {
	display: grid;
	gap: var(--SpaceL);
}

.VolumeBindingPanel {
	display: grid;
	gap: var(--SpaceM);
	padding: var(--SpaceM);
	border: 1px solid var(--ColorHairline);
	border-radius: var(--RadiusMedium);
	background: rgba(255, 255, 255, 0.78);
	box-shadow: var(--ShadowSmall);
}

.VolumeResultValue {
	font-size: 2.45rem;
}

.VolumeUnitField {
	width: auto;
	min-width: 0;
}

.VolumeResultMeta {
	display: grid;
	gap: var(--SpaceXS);
	justify-items: end;
}

.VolumeBindingPanel {
	grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
	align-items: end;
}

.VolumeBindingIntro {
	display: grid;
	gap: var(--Space2XS);
}

.VolumeBindingControls {
	display: grid;
	grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto;
	gap: var(--SpaceS);
	align-items: end;
}

.VolumeBindingActions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--SpaceXS);
	align-items: center;
}

.VolumeWorkspace {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(310px, 380px);
	gap: var(--SpaceL);
	align-items: start;
}

.VolumeWorkspace::before {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--SpaceS));
	z-index: -1;
	border-radius: var(--RadiusMedium);
	background: var(--ColorPaper);
}

.VolumeCanvasPanel {
	min-width: 0;
	display: grid;
	gap: var(--SpaceS);
}

.VolumeToolBar {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--SpaceXS);
	align-items: center;
	padding: var(--SpaceXS);
	border: 1px solid var(--ColorHairline);
	border-radius: var(--RadiusMedium);
	background: rgba(255, 255, 255, 0.76);
}

.VolumeToolButton[aria-pressed="true"] {
	border-color: var(--ColorAquaDark);
	background: var(--ColorAqua);
	color: #ffffff;
}

.VolumeCameraControls {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 2rem) 2rem minmax(3.25rem, auto) 2rem;
	gap: var(--Space2XS);
	align-items: center;
	padding-inline: var(--Space2XS);
}

.VolumeCameraButton {
	width: 2rem;
	min-width: 0;
	padding-inline: 0;
}

.VolumeZoomValue {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3.25rem;
	min-height: 2rem;
	padding-inline: var(--Space2XS);
	border: 1px solid var(--ColorHairline);
	border-radius: var(--RadiusSmall);
	background: rgba(255, 255, 255, 0.68);
	color: var(--ColorInkMuted);
	font-size: 0.88rem;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
}

.VolumeShapeMenu,
.VolumeHelpMenu {
	flex: 0 0 auto;
	position: relative;
}

.VolumeShapeSummary,
.VolumeHelpSummary {
	cursor: pointer;
	list-style: none;
}

.VolumeShapeSummary::-webkit-details-marker,
.VolumeHelpSummary::-webkit-details-marker {
	display: none;
}

.VolumeShapeSummary {
	min-width: 6.25rem;
}

.VolumeShapePanel,
.VolumeHelpPanel {
	position: absolute;
	top: calc(100% + var(--SpaceXS));
	z-index: 10;
	display: grid;
	gap: var(--SpaceXS);
	padding: var(--SpaceS);
	border: 1px solid var(--ColorHairline);
	border-radius: var(--RadiusMedium);
	background: var(--ColorSurface);
	box-shadow: 0 18px 42px rgba(31, 42, 43, 0.18);
}

.VolumeShapePanel {
	left: 0;
	width: min(13rem, calc(100vw - 2rem));
}

.VolumeHelpPanel {
	right: 0;
	width: min(18rem, calc(100vw - 2rem));
}

.VolumeShapePanel .Button,
.VolumeHelpPanel .Button {
	justify-content: flex-start;
}

.VolumeHelpSummary {
	width: 2rem;
	padding-inline: 0;
}

.VolumeCanvasFrame {
	position: relative;
	overflow: hidden;
	min-height: 32rem;
	aspect-ratio: 16 / 10;
	border: 1px solid var(--ColorHairline);
	border-radius: var(--RadiusMedium);
	background: var(--ColorSurface);
	box-shadow: var(--ShadowSmall);
	touch-action: none;
	user-select: none;
}

.VolumeCanvas {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--ColorSurface);
	cursor: grab;
}

.VolumeCanvas[data-active-tool="Rectangle"],
.VolumeCanvas[data-active-tool="Circle"] {
	cursor: crosshair;
}

.VolumeCanvas:active {
	cursor: grabbing;
}

.VolumeCanvas[data-active-tool="Rectangle"]:active,
.VolumeCanvas[data-active-tool="Circle"]:active {
	cursor: crosshair;
}

.VolumeInspector {
	display: grid;
	gap: var(--SpaceM);
	min-width: 0;
}

.VolumeSectionPanel,
.VolumeSummaryPanel {
	box-shadow: none;
}

.VolumeSummaryPanel {
	display: grid;
	grid-template-columns: minmax(300px, 0.75fr) minmax(0, 1.25fr);
	gap: var(--SpaceL);
	align-items: start;
}

.VolumeSummaryResult {
	display: grid;
	gap: var(--SpaceS);
	align-content: start;
}

.VolumeSummaryResult .VolumeResultMeta {
	min-width: 0;
	justify-items: start;
}

.VolumeResultMeta .Badge {
	display: inline-block;
	max-width: min(100%, 32rem);
	min-height: 0;
	overflow: hidden;
	padding: 0.24rem 0.68rem 0.22rem;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.VolumeSummaryMetric {
	gap: var(--SpaceXS);
}

.VolumeSummaryMetricHeader {
	display: flex;
	flex-wrap: wrap;
	gap: var(--SpaceS);
	align-items: center;
	justify-content: space-between;
}

.VolumeSummaryMetricHeader .VolumeUnitField {
	flex: 0 1 12rem;
	min-height: 2.25rem;
	padding-block: 0.35rem;
}

.VolumeSummarySections {
	min-width: 0;
	display: grid;
	gap: var(--SpaceS);
}

.VolumeSummarySections .VolumePanelHeader {
	margin-bottom: 0;
}

.VolumePanelHeader {
	display: grid;
	gap: var(--Space2XS);
	margin-bottom: var(--SpaceS);
}

.VolumeSectionGrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--SpaceS);
}

.VolumeSectionGrid .Field:last-child {
	grid-column: 1 / -1;
}

.VolumeSectionActions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--SpaceS);
}

.VolumeSectionList {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--SpaceS);
	max-height: 18rem;
	overflow: auto;
	padding-right: var(--Space2XS);
}

.VolumeSectionButton {
	width: 100%;
	display: grid;
	gap: var(--Space2XS);
	padding: var(--SpaceS);
	border: 1px solid var(--ColorHairline);
	border-radius: var(--RadiusSmall);
	background: rgba(255, 255, 255, 0.72);
	color: var(--ColorText);
	text-align: left;
}

.VolumeSectionButton:hover,
.VolumeSectionButton:focus-visible {
	border-color: var(--ColorAqua);
	background: var(--ColorSurface);
	outline: none;
}

.VolumeSectionButton[aria-current="true"] {
	border-color: var(--ColorAquaDark);
	background: var(--ColorAquaSoft);
}

.VolumeSectionButton[aria-selected="true"] {
	border-color: var(--ColorAquaDark);
	background: var(--ColorAquaSoft);
	box-shadow: inset 0.25rem 0 0 var(--ColorAquaDark);
}

.VolumeSectionButton strong {
	display: block;
	line-height: 1.15;
}

.VolumeSectionButton span {
	color: var(--ColorMuted);
	font-size: 0.84rem;
	font-weight: 700;
}

.VolumeDataPanel {
	display: grid;
	gap: var(--SpaceS);
	padding: var(--SpaceM);
	border: 1px solid var(--ColorHairline);
	border-radius: var(--RadiusMedium);
	background: rgba(255, 255, 255, 0.76);
}

.VolumeDataPanel > summary {
	cursor: pointer;
	list-style: none;
}

.VolumeDataPanel > summary::-webkit-details-marker {
	display: none;
}

.VolumeDataOutput {
	min-height: 12rem;
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	font-size: 0.82rem;
	line-height: 1.45;
	white-space: pre;
}

@media (max-width: 1040px) {
	.VolumeBindingPanel,
	.VolumeBindingControls,
	.VolumeWorkspace,
	.VolumeSummaryPanel,
	.VolumeSummaryResult {
		grid-template-columns: 1fr;
	}

	.VolumeResultMeta {
		justify-items: start;
	}

	.VolumeCanvasFrame {
		min-height: 28rem;
	}
}

@media (max-width: 680px) {
	.VolumeResultValue {
		font-size: 2rem;
	}

	.VolumeWorkspace::before {
		inset: 0;
	}

	.VolumeBindingActions,
	.VolumeToolBar {
		align-items: stretch;
	}

	.VolumeToolBar {
		flex-wrap: wrap;
	}

	.VolumeBindingActions .Button,
	.VolumeToolBar .Button,
	.VolumeShapeMenu,
	.VolumeHelpMenu {
		width: 100%;
	}

	.VolumeCameraControls {
		width: 100%;
		grid-template-columns: repeat(7, minmax(2.25rem, 1fr));
		padding-inline: 0;
	}

	.VolumeToolBar .VolumeCameraButton {
		width: 100%;
	}

	.VolumeShapeSummary,
	.VolumeHelpSummary {
		width: 100%;
	}

	.VolumeShapePanel,
	.VolumeHelpPanel {
		right: auto;
		left: 0;
		width: 100%;
	}

	.VolumeSectionGrid,
	.VolumeSectionActions {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 540px) {
	.VolumeCanvasFrame {
		min-height: 18rem;
		aspect-ratio: auto;
	}
}