.pendulum-work {
	background: #0c0d0f;
	color: #f1f1ed;
	font-family: Arial, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

.pendulum-work *,
.pendulum-work *::before,
.pendulum-work *::after { box-sizing: border-box; }

.pendulum-work .micro-nav {
	position: relative;
	z-index: 2;
	border-bottom: 1px solid rgba(241, 241, 237, .22);
}

.pendulum-scene {
	position: relative;
	display: flex;
	min-height: calc(100svh - 4.8rem);
	flex-direction: column;
	padding: clamp(1rem, 2.7vw, 3rem);
	isolation: isolate;
	overflow: hidden;
}

.pendulum-scene__heading {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 1.3rem;
}

.pendulum-scene__heading .micro-kicker {
	margin: 0;
	color: #aeb0ac;
	font-size: .68rem;
	letter-spacing: .15em;
}

.pendulum-scene__heading h1 {
	min-height: 1.05em;
	margin: 0;
	font-size: clamp(3.2rem, 9vw, 9rem);
	font-weight: 400;
	letter-spacing: -.075em;
	line-height: .96;
	word-break: keep-all;
}

.pendulum-scene__heading [data-pendulum-title][contenteditable] { cursor: text; }
.pendulum-scene__heading [data-pendulum-title]:focus-visible { outline: 1px solid currentColor; outline-offset: .12em; }

.pendulum-apparatus {
	position: absolute;
	z-index: 0;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.pendulum-apparatus svg {
	display: block;
	width: 100%;
	height: 100%;
}

.pendulum-live-labels {
	position: absolute;
	z-index: 1;
	top: clamp(7rem, 16svh, 11rem);
	right: clamp(1rem, 2.7vw, 3rem);
	bottom: clamp(7rem, 15svh, 11rem);
	display: grid;
	grid-template-rows: repeat(12, minmax(0, 1fr));
	width: clamp(8rem, 20vw, 18rem);
	margin: 0;
	border-left: 1px solid rgba(255, 255, 255, .23);
	padding: 0 0 0 clamp(.7rem, 1.5vw, 1.4rem);
	background: linear-gradient(90deg, transparent, rgba(12, 13, 15, .38));
	list-style: none;
}
.pendulum-live-labels li { display: flex; min-width: 0; align-items: center; gap: .65rem; border-bottom: 1px solid rgba(255, 255, 255, .1); pointer-events: auto; cursor: pointer; }
.pendulum-live-labels li:hover,
.pendulum-live-labels li.is-selected { background: rgba(255, 255, 255, .06); }
.pendulum-live-labels li:focus-visible { outline: 1px solid rgba(255, 255, 255, .8); outline-offset: 2px; }
.pendulum-live-number { flex: 0 0 1.7rem; color: #888b88; font-size: .65rem; font-variant-numeric: tabular-nums; }
.pendulum-live-labels [data-pendulum-live-label] { min-width: 0; overflow: hidden; color: #fff; font-size: clamp(.75rem, 1.1vw, 1rem); text-overflow: ellipsis; white-space: nowrap; }

.pendulum-string { stroke-width: 1; vector-effect: non-scaling-stroke; }
.pendulum-pivot { opacity: 0; pointer-events: none; }
.pendulum-bob { fill: #fff; }
.pendulum-bob { pointer-events: auto; cursor: pointer; }
.pendulum-bob:focus-visible { outline: 1px solid rgba(255, 255, 255, .8); outline-offset: 3px; }

.pendulum-force-panel {
	position: fixed;
	z-index: 4;
	top: 50%;
	left: clamp(1rem, 2.7vw, 3rem);
	transform: translateY(-50%);
	width: min(17rem, calc(100% - 2rem));
	border: 1px solid rgba(255, 255, 255, .6);
	padding: 1rem 1.1rem;
	background: rgba(12, 13, 15, .92);
	color: #fff;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}
.pendulum-force-panel[hidden] { display: none; }
.pendulum-force-panel p { margin: 0 0 .8rem; font-size: .75rem; }
.pendulum-force-panel ul { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.pendulum-force-panel li { display: grid; grid-template-columns: minmax(0, 1fr) 1.5rem; align-items: center; gap: .5rem; font-size: .85rem; }
.pendulum-force-arrow { display: inline-block; width: 1.4rem; text-align: center; transform-origin: 50% 50%; font-size: 1.25rem; line-height: 1; }
.pendulum-force-panel small { display: block; margin-top: .8rem; color: #bfc1bd; font-size: .67rem; line-height: 1.4; }

.pendulum-state {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding: .85rem 0;
	color: #bfc1bd;
	font-size: .66rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: .08em;
}

.pendulum-controls {
	position: relative;
	z-index: 2;
	display: flex;
	min-height: 4.3rem;
	align-items: center;
	gap: .65rem;
	margin-top: auto;
	pointer-events: none;
}

.pendulum-controls button {
	pointer-events: auto;
	min-height: 2.7rem;
	border: 1px solid rgba(241, 241, 237, .55);
	padding: .6rem 1.1rem;
	background: transparent;
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-size: .82rem;
}

.pendulum-controls button:hover,
.pendulum-controls button[aria-pressed="true"] {
	background: #f1f1ed;
	color: #0c0d0f;
}

.pendulum-controls button:focus-visible,
.pendulum-work a:focus-visible {
	outline: 2px solid #f16847;
	outline-offset: 3px;
}

.pendulum-record { padding-top: clamp(4rem, 8vw, 9rem); }

.pendulum-naming {
	display: grid;
	grid-template-columns: minmax(12rem, .6fr) minmax(0, 1.4fr);
	gap: 2rem;
	border-top: 1px solid rgba(255, 255, 255, .25);
	padding: 2rem 0 6rem;
}
.pendulum-naming h2 { margin: 0 0 1rem; font-size: clamp(2rem, 4vw, 4rem); font-weight: 400; letter-spacing: -.05em; }
.pendulum-naming-intro button { margin-top: 1rem; border: 1px solid rgba(255, 255, 255, .55); padding: .7rem 1rem; background: transparent; color: #fff; cursor: pointer; font: inherit; font-size: .8rem; }
.pendulum-naming-intro button:hover { background: #fff; color: #0c0d0f; }
.pendulum-name-list { min-width: 0; }
.pendulum-name-row { display: grid; grid-template-columns: 2.5rem repeat(3, minmax(0, 1fr)); gap: .75rem; align-items: end; border-top: 1px solid rgba(255, 255, 255, .2); padding: .85rem 0; }
.pendulum-name-row:hover,
.pendulum-name-row.is-selected { background: rgba(255, 255, 255, .06); }
.pendulum-name-number { align-self: center; color: #bfc1bd; font-size: .7rem; font-variant-numeric: tabular-nums; }
.pendulum-name-row input { min-width: 0; width: 100%; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .45); border-radius: 0; padding: .4rem 0; background: transparent; color: #fff; font: inherit; font-size: .9rem; }
.pendulum-name-row input:focus-visible, .pendulum-naming button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 740px) {
	.pendulum-scene { min-height: calc(100svh - 4rem); }
	.pendulum-scene__heading { gap: .8rem; }
	.pendulum-scene__heading h1 { font-size: clamp(3rem, 13vw, 5.8rem); }
	.pendulum-live-labels { top: clamp(7rem, 18svh, 10rem); bottom: clamp(7rem, 17svh, 10rem); width: clamp(7rem, 34vw, 10rem); padding-left: .35rem; }
	.pendulum-live-labels li { gap: .2rem; }
	.pendulum-live-number { flex-basis: 1.25rem; font-size: .55rem; }
	.pendulum-live-labels [data-pendulum-live-label] { font-size: .64rem; }
	.pendulum-controls { flex-wrap: wrap; align-items: flex-start; }
	.pendulum-force-panel { top: clamp(7.5rem, 22svh, 12rem); bottom: auto; left: 1rem; width: min(10.5rem, calc(100% - 2rem)); padding: .75rem; transform: none; }
	.pendulum-force-panel li { grid-template-columns: minmax(0, 1fr) 1.2rem; gap: .2rem; font-size: .72rem; }
	.pendulum-force-panel small { font-size: .6rem; }
	.pendulum-naming { grid-template-columns: 1fr; gap: 2rem; }
	.pendulum-name-row { grid-template-columns: 2rem repeat(3, minmax(0, 1fr)); gap: .35rem; }
	.pendulum-name-row input { font-size: .75rem; }
}

@media (max-height: 520px) {
	.pendulum-scene__heading h1 { font-size: clamp(2.5rem, 7vh, 4rem); }
	.pendulum-live-labels {
		top: 2.5rem;
		bottom: 2.5rem;
		width: clamp(14rem, 42vw, 22rem);
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(6, minmax(0, 1fr));
		column-gap: .5rem;
	}
	.pendulum-live-labels li { gap: .2rem; }
	.pendulum-live-number { flex-basis: .9rem; font-size: .5rem; }
	.pendulum-live-labels [data-pendulum-live-label] { font-size: .6rem; }
	.pendulum-controls { min-height: 3.2rem; }
}