ビジュアル

CSSとJavaScriptで作るニキシー管風デジタル時計

投稿日 2026/01/25

更新日 2026/1/24

レトロなニキシー管の“発光”と“ガラス管の質感”を、画像やCanvasを使わず HTML＋CSS で作り込んだ時計です。
中央のボタンをクリックすると電源が切り替わり、点灯時にはグロー（発光色）がテーマごとに変化します。背景のノイズや反射・影まで含めて、ディスプレイとして眺めて楽しいUIを目指しました。

Preview プレビュー

Code コード

HTML

<svg id="kumonosu-noise-svg">
	<filter id='kumonosu-noiseFilter'>
		<feTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch' />
	</filter>
	<rect id="kumonosu-noise-rect" filter='url(#kumonosu-noiseFilter)' />
</svg>
<div class="kumonosu-clock kumonosu-off">
	<div class="kumonosu-shadow"></div>
	<div class="kumonosu-base-container">
		<div class="kumonosu-base">
			<div></div>
		</div>
	</div>
	<div class="kumonosu-small-outer-pipe">
		<div class="kumonosu-small-inner-pipe"></div>
	</div>
	<div class="kumonosu-outer-pipe">
		<div class="kumonosu-inner-pipe"></div>
	</div>
	<div class="kumonosu-pipe-accents">
		<div class="kumonosu-top-tube"></div>
		<div class="kumonosu-tube-holders">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class="kumonosu-top"></div>
		<div class="kumonosu-topinset"></div>
		<div class="kumonosu-left">
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class="kumonosu-right">
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class="kumonosu-bottom-left"></div>
		<div class="kumonosu-bottom-right"></div>
	</div>
	<div class="kumonosu-display">
		<div class="kumonosu-row">
			<div class="kumonosu-col">
				<div>8</div>
				<div id="kumonosu-char01">0</div>
				<div id="kumonosu-char02">0</div>
			</div>
			<div class="kumonosu-col">
				<div>8</div>
				<div id="kumonosu-char11">0</div>
				<div id="kumonosu-char12">0</div>
			</div>
		</div>
		<div class="kumonosu-row">
			<div class="kumonosu-col">
				<div>8</div>
				<div id="kumonosu-char21">0</div>
				<div id="kumonosu-char22">0</div>
			</div>
			<div class="kumonosu-col">
				<div>8</div>
				<div id="kumonosu-char31">0</div>
				<div id="kumonosu-char32">0</div>
			</div>
		</div>
		<div style="height: 0.2em;"></div>
		<div class="kumonosu-small-row">
			<div class="kumonosu-row">
				<div class="kumonosu-col">
					<div>8</div>
					<div id="kumonosu-char41">0</div>
					<div id="kumonosu-char42">0</div>
				</div>
				<div class="kumonosu-col">
					<div>8</div>
					<div id="kumonosu-char51">0</div>
					<div id="kumonosu-char52">0</div>
				</div>
			</div>
		</div>
		<div class="kumonosu-row">
			<div class="kumonosu-col">
				<div>8</div>
				<div id="kumonosu-char61">0</div>
				<div id="kumonosu-char62">0</div>
			</div>
			<div class="kumonosu-col">
				<div>8</div>
				<div id="kumonosu-char71">0</div>
				<div id="kumonosu-char72">0</div>
			</div>
		</div>
		<div class="kumonosu-row">
			<div class="kumonosu-col">
				<div>8</div>
				<div id="kumonosu-char81">0</div>
				<div id="kumonosu-char82">0</div>
			</div>
			<div class="kumonosu-col">
				<div>8</div>
				<div id="kumonosu-char91">0</div>
				<div id="kumonosu-char92">0</div>
			</div>
		</div>
		<div class="kumonosu-row">
			<div class="kumonosu-col">
				<div>8</div>
				<div id="kumonosu-char101">0</div>
				<div id="kumonosu-char102">0</div>
			</div>
			<div class="kumonosu-col">
				<div>8</div>
				<div id="kumonosu-char111">0</div>
				<div id="kumonosu-char112">0</div>
			</div>
		</div>
	</div>
	<div class="kumonosu-glass-tube"></div>
	<div class="kumonosu-hex">
		<div class="kumonosu-overlay"></div>
	</div>
	<div class="kumonosu-tube-base-container">
		<div class="kumonosu-wires">
			<div></div>
			<div></div>
		</div>
		<div class="kumonosu-tube-base"></div>
		<div class="kumonosu-rods">
			<div class="kumonosu-left-rod"></div>
			<div class="kumonosu-center-rod"></div>
			<div class="kumonosu-right-rod"></div>
		</div>
		<div class="kumonosu-tube-btm"></div>
	</div>
	<div class="kumonosu-power-cord">
		<div></div>
		<div></div>
	</div>
	<div class="kumonosu-button">
		<div></div>
	</div>
</div>

CSS

@import url('https://fonts.cdnfonts.com/css/lcd');
* {
	box-sizing: border-box;
}
html, body {
	height: 100%;
	overflow: hidden;
}
body {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 0;
	background: linear-gradient(#040909 60vh, #312c2a 80vh);
	font-family: 'Digitalism', sans-serif;
	--_refl: #f3eeef;
	--_bloom: #fcfbf9;
	--_y1: #fae8a5;
	--_y2: #fbd608;
	--_o1: #ff8f0c;
	--_o2: #e74702;
	--_o3: #b32801;
	--mw1: #d0d5d7;
	--m1: #fdea09;
	--m2: #e46703;
	--m3: #ac2a04;
}
#kumonosu-noise-svg {
	height: 100%;
	width: 100%;
	opacity: 0.12;
	position: absolute;
	z-index: 100;
	pointer-events: none;
}
#kumonosu-noise-rect {
	width: 100vw;
	height: 100vh;
}
.kumonosu-clock {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: calc(var(--_size) * 0.01);
	/* em hack for shade scaling */
	--_factor: min(600px, 80vh);
	--_size: min(var(--_factor), 80vw);
}
.kumonosu-shadow {
	position: absolute;
	bottom: 0;
	top: 0;
	margin: auto;
	width: 100%;
	height: 0em;
	translate: 0 45em;
	box-shadow:
		0 0 3em 2em #040909,
		0 0 8em 3em var(--_o3),
		0 0 10em 4em var(--_o2),
		0 0 10em 5em var(--_o1);
	opacity: 0.6;
}
.kumonosu-shadow::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	height: 20em;
	width: 0;
	box-shadow:
		0 0 8em 4em var(--_y1),
		0 0 8em 6em var(--_y2),
		0 0 8em 8em var(--_o1),
		0 0 8em 10em var(--_o2),
		0 0 8em 12em var(--_o3);
}
.kumonosu-shadow::after {
	content: '';
	display: block;
	position: absolute;
	z-index: -1;
	opacity: 0.5;
	left: 0;
	right: 0;
	margin: auto;
	border-radius: 50%;
	height: 10em;
	width: 10em;
	border: 2px solid red;
	transform: rotateX(70deg);
	box-shadow:
		0 0em 12em 40em var(--_o1),
		0 0em 12em 60em var(--_o2),
		0 0em 12em 80em var(--_o3);
}
.kumonosu-clock.kumonosu-off .kumonosu-shadow {
	box-shadow:
		0 0 4em 3em #040909,
		0 0 8em 3em var(--_o3),
		0 0 10em 4em var(--_o2),
		0 0 10em 5em var(--_o1);
	opacity: 0;
}
.kumonosu-outer-pipe {
	position: absolute;
	z-index: 2;
	width: calc(var(--_size) * (8/15));
	height: var(--_size);
	border-radius: 20% / 10%;
	overflow: hidden;
	opacity: 1;
	--_clip-btm: 85.8%;
	clip-path: polygon(0 0, 100% 0, 100% var(--_clip-btm), 0 var(--_clip-btm));
}
.kumonosu-inner-pipe {
	width: 100%;
	height: 100%;
	scale: 0.84 0.91;
	border-radius: 15% / 7%;
	box-shadow:
		0em 104em 16em 20em #040909,
		/* light on */
		0em 1.2em 1em 0.2em var(--m3),
		0em 1.2em 1em 0.5em var(--m2),
		0em 1.2em 0.5em 1.2em var(--m1),
		0em 1.2em 1.2em 1.5em var(--m2),
		0em 1.2em 2em 2em var(--m3),
		/* ---- */
		0em 90em 16em 20em #040909,
		/* nat light */
		-1em 1em 2em 3.7em #040909,
		0.5em 0em 2em 3.7em #040909,
		0em 0em 0em 4.6em var(--mw1),
		0em 0em 0.5em 5em var(--mw1),
		/* --------- */
		0em 0em 0em 20em #040909;
}
.kumonosu-pipe-accents {
	width: calc(var(--_size) * (8/15));
	height: var(--_size);
	position: absolute;
}
.kumonosu-pipe-accents .kumonosu-top-tube,
.kumonosu-pipe-accents .kumonosu-top,
.kumonosu-pipe-accents .kumonosu-topinset,
.kumonosu-pipe-accents .kumonosu-left,
.kumonosu-pipe-accents .kumonosu-right {
	z-index: 3;
}
.kumonosu-pipe-accents .kumonosu-top-tube {
	position: absolute;
	top: 3%;
	left: 0;
	right: 0;
	margin: auto;
	width: 16%;
	height: 6%;
	background: #040909;
	background: linear-gradient(120deg, rgba(60, 62, 62, 1) 0%, rgba(4, 9, 0, 1) 60%);
	box-shadow:
		inset -0.2em 1.1em 1.4em -0.4em var(--mw1),
		/* light on */
		inset 0em -1.2em 0.5em -1.1em var(--m1),
		inset 0em -1.2em 1em -0.8em var(--m2),
		inset 0em -1.2em 1em -0.2em var(--m3)
		/* -------- */
	;
	border-radius: 20%;
}
.kumonosu-pipe-accents .kumonosu-tube-holders {
	position: absolute;
	width: 26em;
	height: 70em;
	translate: 0 -7em;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 2;
}
.kumonosu-pipe-accents .kumonosu-tube-holders div {
	position: absolute;
	width: 3em;
	height: 3em;
	border-radius: 50%;
	--_metal-1: #30241d;
	--_metal-2: #000000;
	--_metal-3: #5f5f5f;
	--_vl: -8%;
	background: conic-gradient(from 0deg at 50% 50%,
			var(--_metal-1) 0%,
			var(--_metal-2) 7%,
			var(--_metal-1) 21%,
			var(--_metal-2) 35%,
			var(--_metal-2) 42%,
			var(--_metal-3) 56%,
			var(--_metal-1) 63%,
			var(--_metal-1) 70%,
			var(--_metal-2) 77%,
			var(--_metal-3) 84%,
			var(--_metal-2) 91%,
			var(--_metal-1) 100%);
	box-shadow:
		inset 0 0 0.1em 0.1em #ffffff5d,
		/* light on */
		inset 0em -1.2em 0.5em -1.1em var(--m1),
		inset 0em -1.2em 1em -0.8em var(--m2),
		inset 0em -1.2em 1em -0.2em var(--m3)
		/* -------- */
	;
}
.kumonosu-pipe-accents .kumonosu-tube-holders div:nth-child(1) {
	top: 12%;
	left: var(--_vl);
	rotate: -65deg;
}
.kumonosu-pipe-accents .kumonosu-tube-holders div:nth-child(2) {
	top: 12%;
	right: var(--_vl);
	rotate: 65deg;
}
.kumonosu-pipe-accents .kumonosu-tube-holders div:nth-child(3) {
	top: 26%;
	left: var(--_vl);
	rotate: -85deg;
}
.kumonosu-pipe-accents .kumonosu-tube-holders div:nth-child(4) {
	top: 26%;
	right: var(--_vl);
	rotate: 85deg;
}
.kumonosu-pipe-accents .kumonosu-tube-holders div:nth-child(5) {
	top: 78.5%;
	left: var(--_vl);
	rotate: -115deg;
}
.kumonosu-pipe-accents .kumonosu-tube-holders div:nth-child(6) {
	top: 78.5%;
	right: var(--_vl);
	rotate: 115deg;
}
.kumonosu-pipe-accents .kumonosu-top {
	position: absolute;
	top: -0.7%;
	left: 0;
	right: 0;
	margin: auto;
	width: 22%;
	height: 6%;
	background: #040909;
	background: linear-gradient(120deg, rgba(60, 62, 62, 1) 0%, rgba(4, 9, 0, 1) 60%);
	box-shadow:
		inset -0.2em 1.1em 1.4em -0.4em var(--mw1),
		/* light on */
		inset 0em -1.2em 0.5em -1.1em var(--m1),
		inset 0em -1.2em 1em -0.8em var(--m2),
		inset 0em -1.2em 1em -0.2em var(--m3)
		/* -------- */
	;
	border-radius: 20%;
}
.kumonosu-pipe-accents .kumonosu-topinset {
	position: absolute;
	top: -1.7%;
	left: 0;
	right: 0;
	margin: auto;
	width: 14%;
	height: 8%;
	background: #040909;
	background: linear-gradient(120deg, rgba(60, 62, 62, 1) 0%, rgba(4, 9, 0, 1) 60%);
	box-shadow:
		inset -0.2em 1.1em 1.4em -0.4em var(--mw1),
		/* light on */
		inset 0em -1.2em 0.5em -1.1em var(--m1),
		inset 0em -1.2em 1em -0.8em var(--m2),
		inset 0em -1.2em 1em -0.2em var(--m3)
		/* -------- */
	;
	border-radius: 50%;
}
.kumonosu-pipe-accents .kumonosu-topinset::before {
	content: '';
	display: block;
	width: 50%;
	height: 50%;
	border-radius: 50%;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	box-shadow:
		inset 0 0 0em 0.1em #040909,
		/* light on */
		0 0 0.5em 0.1em var(--_bloom),
		inset 0 0 1.3em 0.2em var(--_o3),
		inset 0 0 1.3em 0.4em var(--_o2),
		inset 0 0 1.3em 0.6em var(--_o1),
		inset 0 0 1.3em 2em var(--_y1)
		/* -------- */
	;
	animation: 5s flicker linear infinite;
}
@keyframes flicker {
	0% {
		opacity: 1;
	}
	10% {
		opacity: 1;
	}
	11% {
		opacity: 0.8;
	}
	12% {
		opacity: 1;
	}
	65% {
		opacity: 1;
	}
	66% {
		opacity: 0.7;
	}
	67% {
		opacity: 0.9;
	}
	68% {
		opacity: 1;
	}
	69% {
		opacity: 0.4;
	}
	70% {
		opacity: 1;
	}
	100% {
		top: 1;
	}
}
.kumonosu-pipe-accents .kumonosu-left,
.kumonosu-pipe-accents .kumonosu-right {
	width: 100%;
	height: 100%;
	position: absolute;
}
.kumonosu-pipe-accents .kumonosu-left div,
.kumonosu-pipe-accents .kumonosu-right div {
	--_pipe-pos-x: -3%;
	position: absolute;
	margin: auto;
	width: 14%;
	height: 2.4%;
	border-radius: 0.7em;
	background: #040909;
}
.kumonosu-pipe-accents .kumonosu-left div:nth-child(1) {
	top: 16%;
	left: var(--_pipe-pos-x);
	border-top-right-radius: 50%;
	border-top-left-radius: 50%;
	box-shadow:
		inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
		/* light on */
		inset -1em -0.5em 0.8em -0.8em var(--m3),
		inset -1em -0.5em 0.9em -0.5em var(--m2),
		inset -1em -0.5em 1em -0.3em var(--m1);
	/* -------- */
}
.kumonosu-pipe-accents .kumonosu-left div:nth-child(1)::before {
	content: '';
	display: block;
	width: 98%;
	height: 1em;
	background: #040909;
	position: absolute;
	left: 78%;
	top: 40%;
	rotate: 5deg;
	bottom: 0;
	margin: auto;
	z-index: -1;
	box-shadow:
		inset 0em 0.3em 0.6em -0.4em var(--mw1),
		/* light on */
		inset 1em -0.5em 0.3em -0.5em var(--m3),
		inset 1em -0.5em 0.4em -0.3em var(--m2),
		inset 1em -0.5em 0.6em -0.2em var(--m1)
		/* -------- */
	;
}
.kumonosu-pipe-accents .kumonosu-left div:nth-child(2) {
	top: 26%;
	left: var(--_pipe-pos-x);
	border-top-right-radius: 30%;
	border-top-left-radius: 30%;
	border-bottom-right-radius: 30%;
	border-bottom-left-radius: 30%;
	box-shadow:
		inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
		/* light on */
		inset -1em 0em 0.8em -0.6em var(--m3),
		inset -1em 0em 0.9em 0em var(--m2),
		inset -1em 0em 1em 0.1em var(--m1);
	/* -------- */
}
.kumonosu-pipe-accents .kumonosu-left div:nth-child(2)::before {
	content: '';
	display: block;
	width: 98%;
	height: 1em;
	background: #040909;
	position: absolute;
	left: 78%;
	top: 0%;
	rotate: 2deg;
	bottom: 0;
	margin: auto;
	z-index: -1;
	box-shadow:
		inset 0em 0.3em 0.6em -0.4em var(--mw1),
		/* light on */
		inset 1em -0.1em 0.3em 0em var(--m3),
		inset 1em -0.1em 0.4em 0.2em var(--m2),
		inset 1em -0.1em 0.6em -0.3em var(--m1)
		/* -------- */
	;
}
.kumonosu-pipe-accents .kumonosu-left div:nth-child(3) {
	top: 64%;
	left: var(--_pipe-pos-x);
	border-bottom-right-radius: 40%;
	border-bottom-left-radius: 40%;
	box-shadow:
		inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
		/* light on */
		inset -1em 0.3em 0.8em -0.5em var(--m3),
		inset -1em 0.3em 0.9em -0.3em var(--m2),
		inset -1em 0.3em 1em 0em var(--m1);
	/* -------- */
}
.kumonosu-pipe-accents .kumonosu-left div:nth-child(3)::before {
	content: '';
	display: block;
	width: 98%;
	height: 1em;
	background: #040909;
	position: absolute;
	left: 78%;
	top: 20%;
	rotate: -4deg;
	margin: auto;
	z-index: -1;
	box-shadow:
		inset 0em 0.3em 0.6em -0.4em var(--mw1),
		/* light on */
		inset 1em 0.2em 0.3em -0.1em var(--m3),
		inset 1em 0.2em 0.4em 0em var(--m2),
		inset 1em 0.2em 0.6em 0.1em var(--m1)
		/* -------- */
	;
}
.kumonosu-pipe-accents .kumonosu-right div:nth-child(1) {
	top: 16%;
	right: var(--_pipe-pos-x);
	border-top-right-radius: 50%;
	border-top-left-radius: 50%;
	box-shadow:
		inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
		/* light on */
		inset 1em -0.5em 0.8em -0.8em var(--m3),
		inset 1em -0.5em 0.9em -0.5em var(--m2),
		inset 1em -0.5em 1em -0.3em var(--m1);
	/* -------- */
}
.kumonosu-pipe-accents .kumonosu-right div:nth-child(1)::before {
	content: '';
	display: block;
	width: 98%;
	height: 1em;
	background: #040909;
	position: absolute;
	right: 78%;
	top: 40%;
	rotate: -5deg;
	bottom: 0;
	margin: auto;
	z-index: -1;
	box-shadow:
		inset 0em 0.3em 0.6em -0.4em var(--mw1),
		/* light on */
		inset -1em -0.5em 0.3em -0.5em var(--m3),
		inset -1em -0.5em 0.4em -0.3em var(--m2),
		inset -1em -0.5em 0.6em -0.2em var(--m1)
		/* -------- */
	;
}
.kumonosu-pipe-accents .kumonosu-right div:nth-child(2) {
	top: 26%;
	right: var(--_pipe-pos-x);
	border-top-right-radius: 30%;
	border-top-left-radius: 30%;
	border-bottom-right-radius: 30%;
	border-bottom-left-radius: 30%;
	box-shadow:
		inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
		/* light on */
		inset 1em 0em 0.8em -0.6em var(--m3),
		inset 1em 0em 0.9em 0em var(--m2),
		inset 1em 0em 1em 0.1em var(--m1);
	/* -------- */
}
.kumonosu-pipe-accents .kumonosu-right div:nth-child(2)::before {
	content: '';
	display: block;
	width: 98%;
	height: 1em;
	background: #040909;
	position: absolute;
	right: 78%;
	top: 0%;
	rotate: -2deg;
	bottom: 0;
	margin: auto;
	z-index: -1;
	box-shadow:
		inset 0em 0.3em 0.6em -0.4em var(--mw1),
		/* light on */
		inset -1em -0.1em 0.3em 0em var(--m3),
		inset -1em -0.1em 0.4em 0.2em var(--m2),
		inset -1em -0.1em 0.6em -0.3em var(--m1)
		/* -------- */
	;
}
.kumonosu-pipe-accents .kumonosu-right div:nth-child(3) {
	top: 64%;
	right: var(--_pipe-pos-x);
	border-bottom-right-radius: 40%;
	border-bottom-left-radius: 40%;
	box-shadow:
		inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
		/* light on */
		inset 1em 0.3em 0.8em -0.5em var(--m3),
		inset 1em 0.3em 0.9em -0.3em var(--m2),
		inset 1em 0.3em 1em 0em var(--m1);
	/* -------- */
}
.kumonosu-pipe-accents .kumonosu-right div:nth-child(3)::before {
	content: '';
	display: block;
	width: 98%;
	height: 1em;
	background: #040909;
	position: absolute;
	right: 78%;
	top: 20%;
	rotate: 4deg;
	margin: auto;
	z-index: -1;
	box-shadow:
		inset 0em 0.3em 0.6em -0.4em var(--mw1),
		/* light on */
		inset -1em 0.2em 0.3em -0.1em var(--m3),
		inset -1em 0.2em 0.4em 0em var(--m2),
		inset -1em 0.2em 0.6em 0.1em var(--m1)
		/* -------- */
	;
}
.kumonosu-pipe-accents .kumonosu-bottom-left {
	position: absolute;
	bottom: 12%;
	left: -6%;
	width: 20%;
	height: 2.4%;
	background: #040909;
	border-radius: 40%;
	border-top-left-radius: 50%;
	border-top-right-radius: 50%;
	box-shadow:
		inset -0.4em -0.1em 1em -0.4em var(--mw1),
		/* light on */
		inset -2em 0em 1.8em -1.5em var(--m3),
		inset -2em 0em 1.9em -1.3em var(--m2),
		inset -2em 0em 2em -1em var(--m1)
		/* -------- */
	;
}
.kumonosu-pipe-accents .kumonosu-bottom-left::before {
	display: block;
	content: '';
	position: absolute;
	top: -24%;
	left: 0;
	right: 0;
	margin: auto;
	background: #040909;
	width: 90%;
	height: 70%;
	border-radius: 50%;
	border-top-left-radius: 40%;
	border-top-right-radius: 40%;
	box-shadow:
		inset -0.4em 0em 1em -0.3em var(--mw1),
		/* light on */
		inset -2em 0em 1.8em -1.5em var(--m3),
		inset -2em 0em 1.9em -1.3em var(--m2),
		inset -2em 0em 2em -1em var(--m1)
		/* -------- */
	;
}
.kumonosu-pipe-accents .kumonosu-bottom-right {
	position: absolute;
	bottom: 12%;
	right: -6%;
	width: 20%;
	height: 2.4%;
	background: #040909;
	border-radius: 40%;
	border-top-left-radius: 50%;
	border-top-right-radius: 50%;
	box-shadow:
		inset -0.4em -0.1em 1em -0.4em var(--mw1),
		/* light on */
		inset 2em 0em 1.8em -1.5em var(--m3),
		inset 2em 0em 1.9em -1.3em var(--m2),
		inset 2em 0em 2em -1em var(--m1)
		/* -------- */
	;
}
.kumonosu-pipe-accents .kumonosu-bottom-right::before {
	display: block;
	content: '';
	position: absolute;
	top: -24%;
	left: 0;
	right: 0;
	margin: auto;
	background: #040909;
	width: 90%;
	height: 70%;
	border-radius: 50%;
	border-top-left-radius: 40%;
	border-top-right-radius: 40%;
	box-shadow:
		inset -0.4em 0em 1em -0.3em var(--mw1),
		/* light on */
		inset 2em 0em 1.8em -1.5em var(--m3),
		inset 2em 0em 1.9em -1.3em var(--m2),
		inset 2em 0em 2em -1em var(--m1)
		/* -------- */
	;
}
.kumonosu-small-outer-pipe {
	position: absolute;
	translate: 0 -5.6%;
	width: calc(var(--_size) * (1/2.7));
	height: calc(var(--_size) * 0.87);
	border-radius: 40% / 10%;
	overflow: hidden;
	opacity: 1;
	--_clip-btm: 96%;
	clip-path: polygon(0 0, 100% 0, 100% var(--_clip-btm), 0 var(--_clip-btm));
	border-top: 0.3em solid var(--mw1);
}
.kumonosu-small-inner-pipe {
	width: 100%;
	height: 100%;
	scale: 0.92 0.98;
	border-radius: 35% / 10%;
	box-shadow:
		0em -94em 20em 20em #040909,
		0em 104em 20em 20em #040909,
		/* light on */
		0em 1em 1em 0.2em var(--m3),
		0em 1em 1em 0.5em var(--m2),
		0em 1em 0.5em 1.2em var(--m1),
		0em 1em 1.2em 1.5em var(--m2),
		0em 1em 2em 2em var(--m3),
		/* ---- */
		/* nat light */
		-0.2em 0.5em 0.8em -0.2em var(--mw1),
		0em 90em 16em 20em #040909,
		-1em 1em 2em 2em #040909,
		0.5em 0em 2em 2em #040909,
		0em 0em 0em 4.6em var(--mw1),
		0em 0em 1.5em 5em var(--mw1),
		/* --------- */
		0em 0em 0em 20em #040909;
}
.kumonosu-base-container {
	position: absolute;
	width: calc(var(--_size) * (8/15));
	height: var(--_size);
}
.kumonosu-base-container .kumonosu-base {
	width: 100%;
	height: 100%;
	position: absolute;
}
.kumonosu-base-container .kumonosu-base div {
	background: #040909;
	position: absolute;
	bottom: 4%;
	left: -10%;
	width: 120%;
	height: 12%;
	border-radius: 40% 40% / 30% 30%;
	box-shadow:
		0 2em 2em -1.4em #000,
		inset -0.4em 0.1em 0.8em -0.2em var(--mw1);
}
.kumonosu-base-container .kumonosu-base div::before {
	content: "";
	display: block;
	width: 100%;
	height: 50%;
	border-radius: 100%;
	box-shadow:
		0 2em 10em 0 #000,
		inset -0.4em 0em 0.8em 0em var(--mw1),
		inset 0em 0em 0.5em 0.3em #040909,
		inset 0em 0em 0.5em 0.3em #040909,
		inset 0em 0em 1em 0em #040909,
		inset 0em 0em 2em 0em #040909,
		inset 0em 0em 3em 0em #040909,
		/* light on */
		inset 0em 0em 1em 0em var(--m3),
		inset 0em 0em 1em 2em var(--m2),
		inset 1em 0.3em 10em 10em var(--m1)
		/* -------- */
	;
}
.kumonosu-display {
	color: var(--_bloom);
	font-size: 14em;
	line-height: 0.8em;
	translate: 0 -0.4em;
}
.kumonosu-display .kumonosu-row {
	display: flex;
}
.kumonosu-display .kumonosu-small-row {
	font-size: 0.3em;
	position: absolute;
	right: -22%;
	top: 10%;
}
.kumonosu-display .kumonosu-small-row .kumonosu-row {
	flex-direction: column;
	line-height: 1.02em;
}
.kumonosu-display .kumonosu-row .kumonosu-col {
	display: flex;
	position: relative;
}
.kumonosu-display .kumonosu-row .kumonosu-col>div:nth-child(1) {
	opacity: 0.2;
}
.kumonosu-display .kumonosu-row .kumonosu-col>div:nth-child(2) {
	position: absolute;
	right: 0;
	z-index: 2;
}
.kumonosu-display .kumonosu-row .kumonosu-col>div:nth-child(3) {
	position: absolute;
	right: 0;
	color: var(--_bloom);
	--_o1-size: 0.1em;
	--_o2-size: 0.4em;
	--_o3-size: 0.6em;
	text-shadow:
		0em 0em 0.04em var(--_bloom),
		0em 0em 0.04em var(--_bloom),
		0em 0em var(--_o3-size) var(--_o3),
		0em 0em var(--_o3-size) var(--_o3),
		0em 0em var(--_o3-size) var(--_o3),
		0em 0em var(--_o3-size) var(--_o3),
		0em 0em var(--_o2-size) var(--_o2),
		0em 0em var(--_o2-size) var(--_o2),
		0em 0em var(--_o2-size) var(--_o2),
		0em 0em var(--_o2-size) var(--_o2),
		0em 0em var(--_o1-size) var(--_o1),
		0em 0em var(--_o1-size) var(--_o1),
		0em 0em var(--_o1-size) var(--_o1),
		0em 0em var(--_o1-size) var(--_o1);
}
.kumonosu-glass-tube {
	position: absolute;
	width: 26em;
	height: 70em;
	translate: 0 -7em;
	border-radius: 1000px;
	box-shadow:
		/* light on */
		0em 0em 1em -0.2em var(--m1),
		0em 0em 2em -0.4em var(--m2),
		0em 0em 3em -0.4em var(--m2),
		inset 0em 0em 0.4em 0.2em var(--m3),
		inset 0em 0em 0.6em 0.4em var(--m2),
		inset 0em 0em 1em 0.7em var(--m1),
		inset 0em 0em 3em 0em var(--m2),
		inset 0em 0em 5em 1em var(--m3),
		/* -------- */
		inset -0.1em 0.1em 0.1em 0em var(--mw1),
		inset 0 0 1em 0.1em var(--mw1);
}
.kumonosu-glass-tube::before {
	content: "";
	display: block;
	width: 6%;
	height: 60%;
	box-shadow:
		inset 1.5em 0em 1em -1em var(--mw1);
	position: absolute;
	left: 4%;
	top: 16%;
	filter: blur(0.6px);
	opacity: 0.8;
	border-radius: 50% 1% / 50% 100%;
}
.kumonosu-glass-tube::after {
	content: "";
	display: block;
	width: 30%;
	height: 60%;
	box-shadow:
		inset -1em 0.5em 1em -1em var(--mw1);
	position: absolute;
	right: 4%;
	top: 4%;
	filter: blur(0.6px);
	opacity: 1;
	border-radius: 0% 100% / 10% 30%;
}
.kumonosu-hex {
	position: absolute;
	width: 17.7em;
	height: 70em;
	translate: 0 -7em;
	border-radius: 1000px;
	overflow: hidden;
	z-index: -1;
	opacity: 0.7;
	--_hex-cl1: #040909;
	--_hex-cl2: var(--_o1);
	--_hex-size: 2.18em;
	background:
		radial-gradient(circle farthest-side at 0% 50%, var(--_hex-cl1) 23.5%, rgba(240, 166, 17, 0) 0) calc(1.06*var(--_hex-size)) calc(1.5*var(--_hex-size)),
		radial-gradient(circle farthest-side at 0% 50%, var(--_hex-cl2) 24%, rgba(240, 166, 17, 0) 0) calc(0.94*var(--_hex-size)) calc(1.5*var(--_hex-size)),
		linear-gradient(var(--_hex-cl1) 14%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 85%, var(--_hex-cl1) 0)0 0,
		linear-gradient(150deg, var(--_hex-cl1) 24%, var(--_hex-cl2) 0, var(--_hex-cl2) 26%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 74%, var(--_hex-cl2) 0, var(--_hex-cl2) 76%, var(--_hex-cl1) 0)0 0,
		linear-gradient(30deg, var(--_hex-cl1) 24%, var(--_hex-cl2) 0, var(--_hex-cl2) 26%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 74%, var(--_hex-cl2) 0, var(--_hex-cl2) 76%, var(--_hex-cl1) 0)0 0,
		linear-gradient(90deg, var(--_hex-cl2) 2%, var(--_hex-cl1) 0, var(--_hex-cl1) 98%, var(--_hex-cl2) 0%)0 0 var(--_hex-cl1);
	background-size: calc(2*var(--_hex-size)) calc(3*var(--_hex-size));
}
.kumonosu-hex .kumonosu-overlay {
	position: absolute;
	background: #fff;
	mix-blend-mode: overlay;
	width: 200%;
	left: -40%;
	height: 12%;
	rotate: 40deg;
	animation: 5s electric ease-in infinite;
}
@keyframes electric {
	0% {
		top: 700%;
	}
	100% {
		top: -20%;
	}
}
.kumonosu-tube-base-container {
	position: absolute;
	width: 34em;
	height: 30em;
	translate: 0 24em;
}
.kumonosu-tube-base {
	position: absolute;
	bottom: 4%;
	width: 60%;
	height: 20%;
	background: #040909;
	left: 0;
	right: 0;
	margin: auto;
	border-radius: 80% / 40%;
	box-shadow:
		inset 0em -0.1em 1.2em -0.4em var(--mw1),
		/* light on */
		inset 0em 3em 2.8em -2.5em var(--m3),
		inset 0em 3em 3.9em -2.3em var(--m2),
		inset 0em 3em 4em -2em var(--m1)
		/* -------- */
	;
}
.kumonosu-tube-base::before {
	display: block;
	content: '';
	width: 99%;
	height: 42%;
	background: #040909;
	border-radius: 50%;
	box-shadow:
		inset 0em -0.1em 1.2em -0.4em var(--mw1),
		/* light on */
		inset 0em 0em 1.8em -0.5em var(--m3),
		inset 0em 0em 1.9em -0.3em var(--m2),
		inset 0em 0em 2em -0em var(--m1)
		/* -------- */
	;
}
.kumonosu-tube-btm {
	width: 40%;
	height: 10%;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	bottom: 34%;
	background-color: #040909;
	border-radius: 20% 20% 100% 100%;
	box-shadow:
		inset 0em 0em 1.2em -0.2em var(--mw1),
		/* light on */
		inset 0em 0.3em 1.2em 0em var(--m1),
		inset 0em 0.3em 1.2em 0.3em var(--m2),
		inset 0em 0.3em 1.2em 0.6em var(--m3)
		/* -------- */
	;
}
.kumonosu-tube-btm::before {
	content: '';
	display: block;
	width: 60%;
	height: 40%;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	bottom: -158%;
	border-radius: 30% 30% 100% 100%;
	background-color: #040909;
	box-shadow:
		inset 0em -0.1em 0.7em -0.2em var(--mw1),
		/* light on */
		inset 0em 0.1em 1em -0.7em var(--m1),
		inset 0em 0.1em 1em -0.3em var(--m2),
		inset 0em 0.1em 1em -0em var(--m3)
		/* -------- */
	;
}
.kumonosu-rods {
	width: 50%;
	height: 28%;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	bottom: 14%;
	--_clip-btm: 80%;
	clip-path: polygon(0 0, 100% 0, 100% var(--_clip-btm), 0 var(--_clip-btm));
}
.kumonosu-rods .kumonosu-left-rod {
	width: 60%;
	height: 12%;
	rotate: 60deg;
	position: absolute;
	bottom: 40%;
	left: 0;
	background: #040909;
}
.kumonosu-rods .kumonosu-center-rod {
	width: 30%;
	height: 12%;
	rotate: 90deg;
	position: absolute;
	bottom: 40%;
	right: 0;
	left: 0;
	margin: auto;
	background: #040909;
}
.kumonosu-rods .kumonosu-right-rod {
	width: 60%;
	height: 12%;
	rotate: -60deg;
	position: absolute;
	bottom: 40%;
	right: 0;
	background: #040909;
}
.kumonosu-rods .kumonosu-left-rod,
.kumonosu-rods .kumonosu-center-rod,
.kumonosu-rods .kumonosu-right-rod {
	box-shadow:
		inset 0em 0.1em 0.8em -0.2em var(--mw1),
		/* light on */
		inset 0em 0.1em 1em -0.7em var(--m1),
		inset 0em 0.1em 1em -0.3em var(--m2),
		inset 0em 0.1em 1em -0em var(--m3)
		/* -------- */
	;
}
.kumonosu-wires {
	width: 100%;
	height: 100%;
	z-index: -1;
}
.kumonosu-wires div:nth-child(1),
.kumonosu-wires div:nth-child(2) {
	width: 18%;
	height: 18%;
	rotate: 25deg;
	translate: 14em -5em;
	position: absolute;
	bottom: 0;
	box-shadow:
		inset 0em 0.1em 0.4em 0em var(--mw1),
		inset 0 0 0 0.5em #040909;
	border-radius: 0% 100% / 50% 100%;
}
.kumonosu-wires div:nth-child(2) {
	translate: 15em -8em;
	rotate: 122deg;
	scale: 0.7;
}
.kumonosu-button {
	position: absolute;
	width: 4em;
	height: 4em;
	border-radius: 50%;
	left: 0;
	right: 0;
	margin: auto;
	top: 0;
	bottom: 0;
	translate: 0 43em;
	z-index: 100;
	cursor: pointer;
	background: var(--_bloom);
	box-shadow:
		0em -0.1em 0.2em 0em var(--_o1),
		0em -0.1em 0.2em 0.1em var(--_o2),
		0em -0.1em 0.2em 0.2em var(--_o3),
		0em -0.1em 1em 0.5em var(--_bloom),
		/* light on */
		inset 0em 0em 1em 0em var(--_o3),
		inset 0em 0em 1em 0.5em var(--_o2),
		inset 0em 0em 1em 1em var(--_o1)
		/* -------- */
	;
	filter: blur(1px);
}
.kumonosu-power-cord {
	z-index: -1;
	scale: 1.4 0.9;
	position: absolute;
	width: 100%;
	height: 50em;
	top: 0;
	bottom: 0;
	margin: auto;
	translate: -36em 44em;
	transform: rotateX(55deg) rotateZ(-64deg);
}
.kumonosu-power-cord div:nth-child(1) {
	width: 20em;
	height: 18em;
	box-shadow: 0.3em 0.3em 0.2em 0.1em rgba(255, 255, 255, 0.2);
	border-bottom: 6px solid #040909;
	border-right: 4px solid #040909;
	position: absolute;
	left: 0;
	right: 0;
	translate: 39.3em 0em;
	margin: auto;
	bottom: 4%;
	border-radius: 100% 30% / 100% 0;
}
.kumonosu-power-cord div:nth-child(2) {
	width: 20em;
	height: 12em;
	box-shadow: inset 0.3em 0.1em 0.2em -0.1em rgba(255, 255, 255, 0.2);
	border-top: 3px solid #04090977;
	border-left: 4px solid #040909;
	position: absolute;
	translate: 58em 0.2em;
	left: 0;
	right: 0;
	margin: auto;
	bottom: 40%;
	border-radius: 100% 30% / 100% 0;
}
/* --------------- */
/* -- CLOCK OFF -- */
/* --------------- */
*, *:before, *:after {
	transition: box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out;
	user-select: none;
}
.kumonosu-clock.kumonosu-off .kumonosu-hex {
	opacity: 0.3;
	filter: grayscale(1);
}
.kumonosu-clock.kumonosu-off .kumonosu-hex .kumonosu-overlay {
	display: none;
}
.kumonosu-clock.kumonosu-off .kumonosu-pipe-accents .kumonosu-top-tube,
.kumonosu-clock.kumonosu-off .kumonosu-pipe-accents .kumonosu-top,
.kumonosu-clock.kumonosu-off .kumonosu-pipe-accents .kumonosu-topinset {
	box-shadow:
		inset -0.2em 1.1em 1.4em -0.4em var(--mw1),
		/* light off */
		inset 0em -1.2em 0.5em -1.1em rgba(0, 0, 0, 0),
		inset 0em -1.2em 1em -0.8em rgba(0, 0, 0, 0),
		inset 0em -1.2em 1em -0.2em rgba(0, 0, 0, 0)
		/* -------- */
	;
}
.kumonosu-clock.kumonosu-off .kumonosu-pipe-accents .kumonosu-topinset::before {
	box-shadow:
		inset 0 0 0em 0.1em #040909,
		/* light off */
		-0.1em 0.2em 0.7em 0.1em rgba(255, 255, 255, 0.4),
		inset 0 0 1.3em 0.2em rgba(0, 0, 0, 0),
		inset 0 0 1.3em 0.4em rgba(0, 0, 0, 0),
		inset 0 0 1.3em 0.6em rgba(0, 0, 0, 0),
		inset 0 0 1.3em 2em rgba(0, 0, 0, 0)
		/* -------- */
	;
	animation-play-state: paused;
}
.kumonosu-clock.kumonosu-off .kumonosu-pipe-accents .kumonosu-tube-holders div {
	box-shadow:
		inset 0 0 0.1em 0.1em #ffffff5d,
		/* light off */
		inset 0em -1.2em 0.5em -1.1em rgba(0, 0, 0, 0),
		inset 0em -1.2em 1em -0.8em rgba(0, 0, 0, 0),
		inset 0em -1.2em 1em -0.2em rgba(0, 0, 0, 0)
		/* -------- */
	;
}
.kumonosu-clock.kumonosu-off .kumonosu-inner-pipe {
	box-shadow:
		0em 104em 16em 20em #040909,
		/* light off */
		0em 1.2em 1em 0.2em rgba(0, 0, 0, 0),
		0em 1.2em 1em 0.5em rgba(0, 0, 0, 0),
		0em 1.2em 0.5em 1.2em rgba(0, 0, 0, 0),
		0em 1.2em 1.2em 1.5em rgba(0, 0, 0, 0),
		0em 1.2em 2em 2em rgba(0, 0, 0, 0),
		/* ---- */
		0em 90em 16em 20em #040909,
		/* nat light */
		-1em 1em 2em 3.7em #040909,
		0.5em 0em 2em 3.7em #040909,
		0em 0em 0em 4.6em var(--mw1),
		0em 0em 0.5em 5em var(--mw1),
		/* --------- */
		0em 0em 0em 20em #040909;
}
.kumonosu-clock.kumonosu-off .kumonosu-small-inner-pipe {
	width: 100%;
	height: 100%;
	scale: 0.92 0.98;
	border-radius: 35% / 10%;
	box-shadow:
		0em -94em 20em 20em #040909,
		0em 104em 20em 20em #040909,
		/* light off */
		0em 1em 1em 0.2em rgba(0, 0, 0, 0),
		0em 1em 1em 0.5em rgba(0, 0, 0, 0),
		0em 1em 0.5em 1.2em rgba(0, 0, 0, 0),
		0em 1em 1.2em 1.5em rgba(0, 0, 0, 0),
		0em 1em 2em 2em rgba(0, 0, 0, 0),
		/* ---- */
		/* nat light */
		-0.2em 0.5em 0.8em -0.2em var(--mw1),
		0em 90em 16em 20em #040909,
		-1em 1em 2em 2em #040909,
		0.5em 0em 2em 2em #040909,
		0em 0em 0em 4.6em var(--mw1),
		0em 0em 1.5em 5em var(--mw1),
		/* --------- */
		0em 0em 0em 20em #040909;
}
.kumonosu-clock.kumonosu-off .kumonosu-pipe-accents .kumonosu-bottom-left {
	box-shadow:
		inset -0.4em -0.1em 1em -0.4em var(--mw1),
		/* light off */
		inset -3em 0em 1.8em -1.5em rgba(0, 0, 0, 0),
		inset -3em 0em 1.9em -1.3em rgba(0, 0, 0, 0),
		inset -3em 0em 2em -1em rgba(0, 0, 0, 0)
		/* -------- */
	;
}
.kumonosu-clock.kumonosu-off .kumonosu-pipe-accents .kumonosu-bottom-left::before {
	box-shadow:
		inset -0.4em 0em 1em -0.3em var(--mw1),
		/* light off */
		inset -3em 0em 1.8em -1.5em rgba(0, 0, 0, 0),
		inset -3em 0em 1.9em -1.3em rgba(0, 0, 0, 0),
		inset -3em 0em 2em -1em rgba(0, 0, 0, 0)
		/* -------- */
	;
}
.kumonosu-clock.kumonosu-off .kumonosu-pipe-accents .kumonosu-bottom-right {
	box-shadow:
		inset -0.4em -0.1em 1em -0.4em var(--mw1),
		/* light off */
		inset 3em 0em 1.8em -1.5em rgba(0, 0, 0, 0),
		inset 3em 0em 1.9em -1.3em rgba(0, 0, 0, 0),
		inset 3em 0em 2em -1em rgba(0, 0, 0, 0)
		/* -------- */
	;
}
.kumonosu-clock.kumonosu-off .kumonosu-pipe-accents .kumonosu-bottom-right::before {
	box-shadow:
		inset -0.4em 0em 1em -0.3em var(--mw1),
		/* light off */
		inset 3em 0em 1.8em -1.5em rgba(0, 0, 0, 0),
		inset 3em 0em 1.9em -1.3em rgba(0, 0, 0, 0),
		inset 3em 0em 2em -1em rgba(0, 0, 0, 0)
		/* -------- */
	;
}
.kumonosu-clock.kumonosu-off .kumonosu-pipe-accents .kumonosu-left div:nth-child(1) {
	box-shadow:
		inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
		/* light off */
		inset -1em -0.5em 0.8em -0.8em rgba(0, 0, 0, 0),
		inset -1em -0.5em 0.9em -0.5em rgba(0, 0, 0, 0),
		inset -1em -0.5em 1em -0.3em rgba(0, 0, 0, 0);
	/* -------- */
	;
}
.kumonosu-clock.kumonosu-off .kumonosu-pipe-accents .kumonosu-left div:nth-child(1)::before,
.kumonosu-clock.kumonosu-off .kumonosu-pipe-accents .kumonosu-left div:nth-child(2)::before,
.kumonosu-clock.kumonosu-off .kumonosu-pipe-accents .kumonosu-left div:nth-child(3)::before,
.kumonosu-clock.kumonosu-off .kumonosu-pipe-accents .kumonosu-right div:nth-child(1)::before,
.kumonosu-clock.kumonosu-off .kumonosu-pipe-accents .kumonosu-right div:nth-child(2)::before,
.kumonosu-clock.kumonosu-off .kumonosu-pipe-accents .kumonosu-right div:nth-child(3)::before {
	box-shadow:
		inset 0em 0.3em 0.6em -0.3em var(--mw1),
		/* light off */
		inset 1em -0.5em 0.3em -0.5em rgba(0, 0, 0, 0),
		inset 1em -0.5em 0.4em -0.3em rgba(0, 0, 0, 0),
		inset 1em -0.5em 0.6em -0.2em rgba(0, 0, 0, 0)
		/* -------- */
	;
}
.kumonosu-clock.kumonosu-off .kumonosu-pipe-accents .kumonosu-left div:nth-child(2) {
	box-shadow:
		inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
		/* light off */
		inset -1em 0em 0.8em -0.6em rgba(0, 0, 0, 0),
		inset -1em 0em 0.9em 0em rgba(0, 0, 0, 0),
		inset -1em 0em 1em 0.1em rgba(0, 0, 0, 0);
	/* -------- */
	;
}
.kumonosu-clock.kumonosu-off .kumonosu-pipe-accents .kumonosu-left div:nth-child(3) {
	box-shadow:
		inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
		/* light off */
		inset -1em 0.3em 0.8em -0.5em rgba(0, 0, 0, 0),
		inset -1em 0.3em 0.9em -0.3em rgba(0, 0, 0, 0),
		inset -1em 0.3em 1em 0em rgba(0, 0, 0, 0);
	/* -------- */
	;
}
.kumonosu-clock.kumonosu-off .kumonosu-pipe-accents .kumonosu-right div:nth-child(1) {
	box-shadow:
		inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
		/* light off */
		inset 1em -0.5em 0.8em -0.8em rgba(0, 0, 0, 0),
		inset 1em -0.5em 0.9em -0.5em rgba(0, 0, 0, 0),
		inset 1em -0.5em 1em -0.3em rgba(0, 0, 0, 0);
	/* -------- */
	;
}
.kumonosu-clock.kumonosu-off .kumonosu-pipe-accents .kumonosu-right div:nth-child(2) {
	box-shadow:
		inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
		/* light off */
		inset 1em 0em 0.8em -0.6em rgba(0, 0, 0, 0),
		inset 1em 0em 0.9em 0em rgba(0, 0, 0, 0),
		inset 1em 0em 1em 0.1em rgba(0, 0, 0, 0);
	/* -------- */
	;
}
.kumonosu-clock.kumonosu-off .kumonosu-pipe-accents .kumonosu-right div:nth-child(3) {
	box-shadow:
		inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
		/* light off */
		inset 1em 0.3em 0.8em -0.5em rgba(0, 0, 0, 0),
		inset 1em 0.3em 0.9em -0.3em var(--mw1);
	/* -------- */
	;
}
.kumonosu-clock.kumonosu-off .kumonosu-base-container .kumonosu-base div::before {
	box-shadow:
		0 2em 10em 0 #000,
		inset -0.4em 0em 0.8em 0em var(--mw1),
		inset 0em 0em 0.5em 0.3em #040909,
		inset 0em 0em 0.5em 0.3em #040909,
		inset 0em 0em 1em 0em #040909,
		inset 0em 0em 2em 0em #040909,
		inset 0em 0em 3em 0em #040909,
		/* light off */
		inset 0em 0em 1em 0em rgba(0, 0, 0, 0),
		inset 0em 0em 1em 2em rgba(0, 0, 0, 0),
		inset 1em 0.3em 10em 10em rgba(0, 0, 0, 0)
		/* -------- */
	;
}
.kumonosu-clock.kumonosu-off .kumonosu-display .kumonosu-row .kumonosu-col>div:nth-child(2) {
	opacity: 0;
}
.kumonosu-clock.kumonosu-off .kumonosu-display .kumonosu-row .kumonosu-col>div:nth-child(3) {
	opacity: 0;
}
.kumonosu-clock.kumonosu-off .kumonosu-glass-tube {
	box-shadow:
		/* light off */
		0em 0em 1em -0.2em rgba(0, 0, 0, 0),
		0em 0em 2em -0.4em rgba(0, 0, 0, 0),
		0em 0em 3em -0.4em rgba(0, 0, 0, 0),
		inset 0em 0em 0.4em 0.2em rgba(0, 0, 0, 0),
		inset 0em 0em 0.6em 0.4em rgba(0, 0, 0, 0),
		inset 0em 0em 1em 0.7em rgba(0, 0, 0, 0),
		inset 0em 0em 3em 0em rgba(0, 0, 0, 0),
		inset 0em 0em 5em 1em rgba(0, 0, 0, 0),
		/* -------- */
		inset -0.1em 0.1em 0.1em 0em var(--mw1),
		inset 0 0 1em 0.1em var(--mw1);
}
.kumonosu-clock.kumonosu-off .kumonosu-tube-base {
	box-shadow:
		inset 0em -0.1em 1.2em -0.4em var(--mw1),
		/* light off */
		inset 0em 3em 2.8em -2.5em rgba(0, 0, 0, 0),
		inset 0em 3em 3.9em -2.3em rgba(0, 0, 0, 0),
		inset 0em 3em 4em -2em rgba(0, 0, 0, 0)
		/* -------- */
	;
}
.kumonosu-clock.kumonosu-off .kumonosu-tube-base::before {
	box-shadow:
		inset 0em -0.1em 1.2em -0.4em var(--mw1),
		/* light off */
		inset 0em 0em 1.8em -0.5em rgba(0, 0, 0, 0),
		inset 0em 0em 1.9em -0.3em rgba(0, 0, 0, 0),
		inset 0em 0em 2em -0em rgba(0, 0, 0, 0)
		/* -------- */
	;
}
.kumonosu-clock.kumonosu-off .kumonosu-tube-btm {
	box-shadow:
		inset 0em 0em 1.2em -0.2em var(--mw1),
		/* light off */
		inset 0em 0.3em 1.2em 0em rgba(0, 0, 0, 0),
		inset 0em 0.3em 1.2em 0.3em rgba(0, 0, 0, 0),
		inset 0em 0.3em 1.2em 0.6em rgba(0, 0, 0, 0)
		/* -------- */
	;
}
.kumonosu-clock.kumonosu-off .kumonosu-tube-btm::before {
	box-shadow:
		inset 0em -0.1em 0.7em -0.2em var(--mw1),
		/* light off */
		inset 0em 0.1em 1em -0.7em rgba(0, 0, 0, 0),
		inset 0em 0.1em 1em -0.3em rgba(0, 0, 0, 0),
		inset 0em 0.1em 1em -0em rgba(0, 0, 0, 0)
		/* -------- */
	;
}
.kumonosu-clock.kumonosu-off .kumonosu-rods .kumonosu-left-rod,
.kumonosu-clock.kumonosu-off .kumonosu-rods .kumonosu-center-rod,
.kumonosu-clock.kumonosu-off .kumonosu-rods .kumonosu-right-rod {
	box-shadow:
		inset 0em 0.1em 0.8em -0.2em var(--mw1),
		/* light off */
		inset 0em 0.1em 1em -0.7em rgba(0, 0, 0, 0),
		inset 0em 0.1em 1em -0.3em rgba(0, 0, 0, 0),
		inset 0em 0.1em 1em -0em rgba(0, 0, 0, 0)
		/* -------- */
	;
}
.kumonosu-clock.kumonosu-off .kumonosu-wires div:nth-child(1),
.kumonosu-clock.kumonosu-off .kumonosu-wires div:nth-child(2) {
	box-shadow:
		inset 0em 0.1em 0.4em -0.1em var(--mw1),
		inset 0 0 0 0.5em #040909;
}
.kumonosu-clock.kumonosu-off .kumonosu-button {
	background: #8d8d8d;
	box-shadow:
		0em -0.1em 0.2em 0em #040909,
		0em -0.1em 0.2em 0.1em #040909,
		0em 0em 1em 0.5em var(--_bloom),
		0em -0.1em 1em 0.5em #040909,
		/* light off */
		inset 0em 0em 1em 0em var(--mw1),
		inset 0em 0em 1em 0.5em var(--mw1),
		inset 0em 0em 1em 1em var(--mw1)
		/* -------- */
	;
	filter: blur(0.7px);
	animation: 5s flicker linear infinite;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    // --- 1. 時間と日付の更新処理 ---
    function updateTimeAndDate() {
        const now = new Date();
        let hours = now.getHours();
        const minutes = now.getMinutes().toString().padStart(2, '0');
        let amPm = hours >= 12 ? 'PM' : 'AM';
        if (hours > 12) { hours -= 12; } else if (hours === 0) { hours = 12; }
        
        let timeStr = hours.toString().padStart(2, '0') + minutes;
        if (timeStr.startsWith('0')) { timeStr = ' ' + timeStr.slice(1); }
        
        let month = (now.getMonth() + 1).toString().padStart(2, '0');
        let day = now.getDate().toString().padStart(2, '0');
        const year = now.getFullYear().toString().slice(-2);
        if (month.startsWith('0')) { month = ' ' + month.slice(1); }
        if (day.startsWith('0')) { day = ' ' + day.slice(1); }
        
        const displayStr = timeStr + amPm + month + day + year;
        for (let i = 0; i < 12; i++) {
            const char1 = document.getElementById('kumonosu-char' + i + '1');
            const char2 = document.getElementById('kumonosu-char' + i + '2');
            if (char1) char1.textContent = displayStr[i];
            if (char2) char2.textContent = displayStr[i];
        }
    }

    // --- 2. 色のランダム化処理 ---
    let currentColorIndex = 0;
    function randomizeGlowColors() {
        const root = document.body;
        const colorThemes = [15, 55, 120, 200, 280, 330, 0];
        const baseHue = colorThemes[currentColorIndex];
        root.style.setProperty('--_o1', `hsl(${baseHue}, 100%, 52%)`);
        root.style.setProperty('--_o2', `hsl(${baseHue}, 100%, 45%)`);
        root.style.setProperty('--_o3', `hsl(${baseHue}, 100%, 35%)`);
        root.style.setProperty('--_y1', `hsl(${baseHue + 15}, 80%, 80%)`);
        root.style.setProperty('--_y2', `hsl(${baseHue + 10}, 100%, 50%)`);
        root.style.setProperty('--m1', `hsl(${baseHue + 10}, 100%, 51%)`);
        root.style.setProperty('--m2', `hsl(${baseHue}, 97%, 45%)`);
        root.style.setProperty('--m3', `hsl(${baseHue}, 96%, 34%)`);
        currentColorIndex = (currentColorIndex + 1) % colorThemes.length;
    }

    // --- 3. 電源ボタンのクリックイベント設定 ---
    const btn = document.querySelector('.kumonosu-button');
    const clock = document.querySelector('.kumonosu-clock');

    if (btn && clock) {
        btn.addEventListener('click', function() {
            const isTurningOn = clock.classList.contains('kumonosu-off');
            if (isTurningOn) {
                randomizeGlowColors();
            }
            clock.classList.toggle('kumonosu-off');
        });
    }

    // 初期実行
    updateTimeAndDate();
    setInterval(updateTimeAndDate, 60000);
});

Explanation 詳しい説明

何ができるもの？

現在時刻を表示します（12時間表記・AM/PM付き）
日付を表示します（月・日・年下2桁：MMDDYY）
電源ON/OFFの演出ができます（中央ボタンをクリック）
点灯時に グロー（発光色テーマ）を順番に切替できます
クリックで点灯するたびに、テーマ配列（colorThemes）に沿って色味が変化します

表示仕様（このコードの挙動）

表示フォーマットは、内部的に次の並びです：
HHMM + AM/PM + MMDD + YY
例： 930AM 112425 のようなイメージ（先頭ゼロはスペースに置換）
先頭の 0 は スペースに置き換えて、1桁時間を自然に見せています
時刻：09:30 → " 930" のような扱い
月/日：01 → " 1" のような扱い（見た目を詰めすぎない）
更新間隔：setInterval(updateTimeAndDate, 60000);
1分ごとに更新します（秒は表示しない設計）

デザイン上のポイント（UI/演出）

ガラス管風の反射：::before / ::after のハイライトで再現
発光の厚み：多段 text-shadow と box-shadow を重ねて「芯」「にじみ」「外側グロー」を作成
背景ノイズ：SVGの feTurbulence で微細ノイズをオーバーレイ
点灯時の揺らぎ：@keyframes flicker で“ちらつき”を付与（ON時の雰囲気づくり）

カスタマイズ方法

1) 色テーマ（発光色）を変える

JSのここが色テーマです：

const colorThemes = [15, 55, 120, 200, 280, 330, 0];

これは Hue（色相） を並べた配列です。数値を変えると雰囲気が変わります。
例：

青寄りにしたい → 200 前後を多めに
ピンク寄りにしたい → 300 前後
緑寄りにしたい → 120 前後

さらに発光の強さは、CSS変数の明度/彩度の部分でも調整できます：

--_o1 --_o2 --_o3（外側グローの層）
--_y1 --_y2（明るい芯の色）
--m1 --m2 --m3（金属・ガラス内の光の回り込み）

2) 24時間表記にしたい

現状は12時間＋AM/PMです。24時間にする場合は以下の方針で変更します：

amPm を消す（または固定表示しない）
hours をそのまま getHours() の値で padStart(2,'0')
displayStr から amPm を抜く
※ その代わり、表示文字数（12文字）との整合が必要です（後述の注意点参照）

3) 秒を表示したい

setInterval を 1000ms にする
表示フォーマットに SS を足す
ただしこのUIは 12桁前提のDOM構造なので、秒を足すと 桁が足りないか、どこかを削る必要があります（例：年を消す、AM/PMを消す、など）。

4) 更新タイミングを「分の切り替わり」に揃えたい

今は「起動した瞬間から1分ごと」なので、起動タイミングによっては分表示の切り替わりがズレることがあります。
ズレを嫌う場合は、次の分境界まで待ってから1分更新を回す方式にすると見た目が締まります。

注意点（運用・実装）

文字数（桁）に強く依存しています
for (let i = 0; i < 12; i++) { ... } で12文字を固定割り当て
フォーマットを変更するなら、12文字に収めるか、DOM側（kumonosu-char??）を増減してください
モバイル端末や低スペック環境では、
多重 box-shadow / text-shadow が重く感じることがあります
その場合は影の段数を減らす、opacity を抑える、filter: blur() を減らすと軽くなります
フォント読み込み：冒頭で @import していますが、本文では別フォント指定も混在しています
表示を安定させたい場合は、使用フォントを1つに統一して、読み込み元と font-family を揃えるのがおすすめです
overflow: hidden; のため、ページ全体が固定レイアウトになります
組み込み用途（埋め込みウィジェット）なら、外側ラッパーに収めて overflow を調整してください