【2026/01紹介分】CSS・JavaScriptで実装できる光るUIのネオンまとめ

<div class="kumonosu-visual-base">
  <!-- 4層のネオンレイヤー -->
  <div class="kumonosu-effect-shell kumonosu-layer-aura">
  </div>
  <div class="kumonosu-effect-shell kumonosu-layer-deep">
  </div>
  <div class="kumonosu-effect-shell kumonosu-layer-vivid">
  </div>
  <div class="kumonosu-effect-shell kumonosu-layer-main">
  </div>
  <!-- メインのブロック要素 -->
  <div class="kumonosu-core-block">KUMONOSU BLOCK</div>
  <!-- 左上の光のアクセント -->
  <div class="kumonosu-accent-dot">
  </div>
</div>

:root {
	--kumonosu-spin-speed: 4s;
	--kumonosu-card-width: 301px;
	--kumonosu-card-height: 56px;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #0a0a0b;
	font-family: 'Inter', system-ui, sans-serif;
	overflow: hidden;
}

/* 外側のコンテナ */
.kumonosu-visual-base {
	position: relative;
	width: 314px;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 内部のメインブロック */
.kumonosu-core-block {
	width: var(--kumonosu-card-width);
	height: var(--kumonosu-card-height);
	background: linear-gradient(135deg, #010201 0%, #0a0509 100%);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 1px;
	position: relative;
	z-index: 5;
	cursor: pointer;
	border: none;
}

/* --- ここから最初のコードの光り方を再現 --- */

.kumonosu-effect-shell {
	position: absolute;
	border-radius: 12px;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
}

/* レイヤーを回転させる共通設定 */
.kumonosu-effect-shell::after {
	content: '';
	position: absolute;
	width: 200%;
	height: 200%;
	top: -50%;
	left: -50%;
	animation: kumonosu-spin-anim var(--kumonosu-spin-speed) linear infinite;
	/* 初期状態は停止 */
	animation-play-state: paused;
}

/* ホバー時にすべてのアニメーションを開始 */
.kumonosu-visual-base:hover .kumonosu-effect-shell::after {
	animation-play-state: running;
}

/* 層 1: 外側の大きなぼかし (outer-glow相当) */
.kumonosu-layer-aura {
	width: 354px;
	height: 130px;
	filter: blur(32px);
	opacity: 0.6;
}

.kumonosu-layer-aura::after {
	background: conic-gradient(from 60deg at 50% 50%,
			transparent 0deg, #4d3fd0 15deg, transparent 145deg,
			transparent 180deg, #e830ba 215deg, transparent 325deg);
}

/* 層 2: 深い色のエッジ (dark-layer相当) */
.kumonosu-layer-deep {
	width: 312px;
	height: 65px;
	filter: blur(2.5px);
}

.kumonosu-layer-deep::after {
	background: conic-gradient(from 82deg at 50% 50%,
			transparent 0deg, #2018a0 25deg, transparent 75deg,
			transparent 180deg, #8d2580 205deg, transparent 255deg);
}

/* 層 3: 明るいハイライト (bright-layer相当) */
.kumonosu-layer-vivid {
	width: 307px;
	height: 63px;
	filter: blur(1.8px) brightness(1.6);
}

.kumonosu-layer-vivid::after {
	background: conic-gradient(from 83deg at 50% 50%,
			transparent 0deg, #b5a5e8 20deg, transparent 60deg,
			transparent 180deg, #f0b0e5 200deg, transparent 240deg);
}

/* 層 4: メインの境界線 (primary-border相当) */
.kumonosu-layer-main {
	width: 303px;
	height: 59px;
	filter: blur(0.4px) brightness(1.5);
}

.kumonosu-layer-main::after {
	background: conic-gradient(from 70deg at 50% 50%,
			transparent 0deg, #5040d5 20deg, transparent 80deg,
			transparent 180deg, #e540c0 210deg, transparent 270deg);
	animation-delay: 0.15s;
}

/* 装飾的なピンクのヒント */
.kumonosu-accent-dot {
	position: absolute;
	width: 30px;
	height: 20px;
	background: radial-gradient(circle, #cf30aa 0%, transparent 70%);
	top: 18px;
	left: 20px;
	filter: blur(18px);
	opacity: 0.75;
	z-index: 4;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.kumonosu-visual-base:hover .kumonosu-accent-dot {
	opacity: 0;
}

@keyframes kumonosu-spin-anim {
	to {
		transform: rotate(360deg);
	}
}

<canvas id="kumonosu-canvas"></canvas>

body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-color: black;
	overflow: hidden;
}

/* ID指定でスタイルを適用することも可能 */
#kumonosu-canvas {
	display: block;
}

const canvas = document.getElementById('kumonosu-canvas');
const ctx = canvas.getContext('2d');

// 基本設定
const fontSize = 14;
const chars = "0101010101010101010101010101";
const colors = ['#008000', '#32CD32', '#228B22', '#00FF00'];

let columns = 0;
let drops = [];

// 画面サイズの設定と初期化
function init() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    columns = Math.floor(canvas.width / fontSize);
    drops = [];
    for (let i = 0; i < columns; i++) {
        // 降り始めをバラバラにするためにマイナスの開始位置を設定
        drops[i] = Math.random() * -100;
    }
}

// 描画処理
function draw() {
    // 背景を半透明で塗りつぶすことで、過去の文字を徐々に消し「残像」を作る
    ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.font = fontSize + "px Courier";

    for (let i = 0; i < drops.length; i++) {
        // ランダムな一文字を選択
        const text = chars.charAt(Math.floor(Math.random() * chars.length));

        // 色のランダム設定
        ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];

        const x = i * fontSize;
        const y = drops[i] * fontSize;

        ctx.fillText(text, x, y);

        // 画面下端に到達した後、低確率で最上部へリセット（雨が降り続ける演出）
        if (y > canvas.height && Math.random() > 0.95) {
            drops[i] = 0;
        }

        // 落下速度の更新
        drops[i]++;
    }
}

// 初期実行
init();

// ループ実行（約30FPS）
setInterval(draw, 33);

// ブラウザのリサイズに対応
window.addEventListener('resize', () => {
    init();
});

<div class="kumonosu-heart">
  <canvas id="kumonosu-canvas"></canvas>
</div>

.kumonosu-heart {
  background-color: #000;    
  margin: 0;
  overflow: hidden;
  background-repeat: no-repeat;
  height: 100%;
}

// ===============================
// 1) Canvas / WebGL 初期化
// ===============================
const kumonosuCanvas = document.getElementById("kumonosu-canvas");
if (!kumonosuCanvas) throw new Error('Canvas "#kumonosu-canvas" not found.');

kumonosuCanvas.style.display = "block";
kumonosuCanvas.style.margin = "0";
kumonosuCanvas.style.backgroundColor = "#000";
kumonosuCanvas.style.borderRadius = "15px";
kumonosuCanvas.style.width = "100%";
kumonosuCanvas.style.height = "100vh"; // 必要に応じてCSS側で調整OK

const kumonosuGl = kumonosuCanvas.getContext("webgl", { antialias: true });
if (!kumonosuGl) throw new Error("WebGL is not supported in this browser.");

let kumonosuTime = 0;

// ===============================
// 2) Shader
// ===============================
const kumonosuVertexSource = `
attribute vec2 position;
void main() {
  gl_Position = vec4(position, 0.0, 1.0);
}
`;

const kumonosuFragmentSource = `
precision highp float;

uniform float width;
uniform float height;
uniform float time;

#define POINT_COUNT 8

vec2 points[POINT_COUNT];
const float speed = -0.5;
const float len = 0.25;

float intensity = 1.3;
float radius = 0.008;

float sdBezier(vec2 pos, vec2 A, vec2 B, vec2 C){
  vec2 a = B - A;
  vec2 b = A - 2.0*B + C;
  vec2 c = a * 2.0;
  vec2 d = A - pos;

  float kk = 1.0 / dot(b,b);
  float kx = kk * dot(a,b);
  float ky = kk * (2.0*dot(a,a)+dot(d,b)) / 3.0;
  float kz = kk * dot(d,a);
  float res = 0.0;

  float p = ky - kx*kx;
  float p3 = p*p*p;
  float q = kx*(2.0*kx*kx - 3.0*ky) + kz;
  float h = q*q + 4.0*p3;

  if(h >= 0.0){
    h = sqrt(h);
    vec2 x = (vec2(h, -h) - q) / 2.0;
    vec2 uv = sign(x)*pow(abs(x), vec2(1.0/3.0));
    float t = uv.x + uv.y - kx;
    t = clamp(t, 0.0, 1.0);
    vec2 qos = d + (c + b*t)*t;
    res = length(qos);
  } else {
    float z = sqrt(-p);
    float v = acos(q/(p*z*2.0)) / 3.0;
    float m = cos(v);
    float n = sin(v)*1.732050808;

    vec3 t = vec3(m + m, -n - m, n - m) * z - kx;
    t = clamp(t, 0.0, 1.0);

    vec2 qos = d + (c + b*t.x)*t.x;
    float dis = dot(qos,qos);
    res = dis;

    qos = d + (c + b*t.y)*t.y;
    dis = dot(qos,qos);
    res = min(res,dis);

    qos = d + (c + b*t.z)*t.z;
    dis = dot(qos,qos);
    res = min(res,dis);

    res = sqrt(res);
  }

  return res;
}

vec2 getHeartPosition(float t){
  return vec2(
    16.0 * sin(t) * sin(t) * sin(t),
    -(13.0 * cos(t) - 5.0 * cos(2.0*t) - 2.0 * cos(3.0*t) - cos(4.0*t))
  );
}

float getGlow(float dist, float radius, float intensity){
  return pow(radius/dist, intensity);
}

float getSegment(float t, vec2 pos, float offset, float scale){
  for(int i = 0; i < POINT_COUNT; i++){
    points[i] = getHeartPosition(offset + float(i)*len + fract(speed * t) * 6.28);
  }

  vec2 c = (points[0] + points[1]) / 2.0;
  vec2 c_prev;
  float dist = 10000.0;

  for(int i = 0; i < POINT_COUNT-1; i++){
    c_prev = c;
    c = (points[i] + points[i+1]) / 2.0;
    dist = min(dist, sdBezier(pos, scale * c_prev, scale * points[i], scale * c));
  }

  return max(0.0, dist);
}

void main(){
  vec2 resolution = vec2(width, height);
  vec2 uv = gl_FragCoord.xy / resolution.xy;

  float ratio = resolution.x / resolution.y;

  vec2 centre = vec2(0.5, 0.5);
  vec2 pos = centre - uv;
  pos.y /= ratio;
  pos.y += 0.02;

  float scale = 0.005;

  float dist = getSegment(time, pos, 0.0, scale);
  float glow = getGlow(dist, radius, intensity);

  vec3 col = vec3(0.0);
  col += 10.0 * vec3(smoothstep(0.003, 0.001, dist));
  col += glow * vec3(1.0, 0.05, 0.3);

  dist = getSegment(time, pos, 3.4, scale);
  glow = getGlow(dist, radius, intensity);

  col += 10.0 * vec3(smoothstep(0.003, 0.001, dist));
  col += glow * vec3(0.1, 0.4, 1.0);

  col = 1.0 - exp(-col);
  col = pow(col, vec3(0.4545)); // ガンマ補正
  gl_FragColor = vec4(col, 1.0);
}
`;

// ===============================
// 3) WebGL ユーティリティ
// ===============================
function kumonosuCompileShader(source, type) {
  const shader = kumonosuGl.createShader(type);
  kumonosuGl.shaderSource(shader, source);
  kumonosuGl.compileShader(shader);

  if (!kumonosuGl.getShaderParameter(shader, kumonosuGl.COMPILE_STATUS)) {
    throw new Error(kumonosuGl.getShaderInfoLog(shader) || "Shader compile error.");
  }
  return shader;
}

function kumonosuGetAttrib(program, name) {
  const loc = kumonosuGl.getAttribLocation(program, name);
  if (loc === -1) throw new Error(`Attrib not found: ${name}`);
  return loc;
}

function kumonosuGetUniform(program, name) {
  const loc = kumonosuGl.getUniformLocation(program, name);
  if (!loc) throw new Error(`Uniform not found: ${name}`);
  return loc;
}

// ===============================
// 4) Program / Buffer セットアップ
// ===============================
const kumonosuProgram = kumonosuGl.createProgram();
kumonosuGl.attachShader(kumonosuProgram, kumonosuCompileShader(kumonosuVertexSource, kumonosuGl.VERTEX_SHADER));
kumonosuGl.attachShader(kumonosuProgram, kumonosuCompileShader(kumonosuFragmentSource, kumonosuGl.FRAGMENT_SHADER));
kumonosuGl.linkProgram(kumonosuProgram);
kumonosuGl.useProgram(kumonosuProgram);

// 全画面用の板ポリ（-1〜1）
const kumonosuVertexData = new Float32Array([-1, 1, -1, -1, 1, 1, 1, -1]);
const kumonosuBuffer = kumonosuGl.createBuffer();
kumonosuGl.bindBuffer(kumonosuGl.ARRAY_BUFFER, kumonosuBuffer);
kumonosuGl.bufferData(kumonosuGl.ARRAY_BUFFER, kumonosuVertexData, kumonosuGl.STATIC_DRAW);

const kumonosuPosition = kumonosuGetAttrib(kumonosuProgram, "position");
kumonosuGl.enableVertexAttribArray(kumonosuPosition);
kumonosuGl.vertexAttribPointer(kumonosuPosition, 2, kumonosuGl.FLOAT, false, 8, 0);

// uniform
const kumonosuTimeHandle = kumonosuGetUniform(kumonosuProgram, "time");
const kumonosuWidthHandle = kumonosuGetUniform(kumonosuProgram, "width");
const kumonosuHeightHandle = kumonosuGetUniform(kumonosuProgram, "height");

// ===============================
// 5) リサイズ（表示サイズに追従）
// ===============================
function kumonosuResize() {
  const rect = kumonosuCanvas.getBoundingClientRect();
  const dpr = window.devicePixelRatio || 1;

  const displayW = Math.max(1, Math.floor(rect.width));
  const displayH = Math.max(1, Math.floor(rect.height));

  const internalW = Math.max(1, Math.floor(displayW * dpr));
  const internalH = Math.max(1, Math.floor(displayH * dpr));

  if (kumonosuCanvas.width !== internalW || kumonosuCanvas.height !== internalH) {
    kumonosuCanvas.width = internalW;
    kumonosuCanvas.height = internalH;

    kumonosuGl.viewport(0, 0, internalW, internalH);
    kumonosuGl.uniform1f(kumonosuWidthHandle, internalW);
    kumonosuGl.uniform1f(kumonosuHeightHandle, internalH);
  }
}

kumonosuResize();
window.addEventListener("resize", kumonosuResize);

// 親要素のサイズ変化（レイアウト変更）にも追従
if ("ResizeObserver" in window) {
  const ro = new ResizeObserver(kumonosuResize);
  ro.observe(kumonosuCanvas);
}

// ===============================
// 6) アニメーションループ
// ===============================
let kumonosuLast = performance.now();

function kumonosuDraw(now) {
  const dt = (now - kumonosuLast) / 1000;
  kumonosuLast = now;
  kumonosuTime += dt;

  kumonosuGl.uniform1f(kumonosuTimeHandle, kumonosuTime);
  kumonosuGl.drawArrays(kumonosuGl.TRIANGLE_STRIP, 0, 4);

  requestAnimationFrame(kumonosuDraw);
}

requestAnimationFrame(kumonosuDraw);

<div class="kumonosu-container">
	<div class="kumonosu-title-main" data-text="Glitch">Glitch</div>
	<div class="kumonosu-title-sub" data-text="グリッチ">グリッチ</div>
</div>

/*===========================================
        変数定義
===========================================*/
:root {
	--kumonosu-bg-color: #151118;
	--kumonosu-accent-cyan: #00F0FF;
	--kumonosu-accent-pink: #FF0055;
	--kumonosu-main-gradient: linear-gradient(100deg, #3624ff, #ff3c3c);
	--kumonosu-sub-color: #5e50ff;
	--kumonosu-glitch-interval: 4s;
}
/*===========================================
        レイアウト設定
===========================================*/
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}
body {
	background: var(--kumonosu-bg-color);
	display: grid;
	place-items: center;
	/* 上下左右中央配置 */
	overflow: hidden;
}
.kumonosu-container {
	text-align: center;
	padding: 20px;
}
/*===========================================
        メインタイトル
===========================================*/
.kumonosu-title-main {
	position: relative;
	display: inline-block;
	font-size: clamp(40px, 10vw, 80px);
	font-weight: bold;
	/* フォント指定なしのため太めに設定 */
	line-height: 1.2;
	letter-spacing: 0.05em;
	background: var(--kumonosu-main-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: kumonosu-flicker var(--kumonosu-glitch-interval) infinite step-end;
}
/*===========================================
        サブタイトル
===========================================*/
.kumonosu-title-sub {
	position: relative;
	display: block;
	margin-top: 0.5em;
	font-size: clamp(14px, 3vw, 20px);
	color: var(--kumonosu-sub-color);
	letter-spacing: 0.2em;
	animation: kumonosu-flicker var(--kumonosu-glitch-interval) infinite step-end;
}
/*===========================================
        グリッチ共通設定 (疑似要素)
===========================================*/
.kumonosu-title-main::before,
.kumonosu-title-main::after,
.kumonosu-title-sub::before,
.kumonosu-title-sub::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
}
/* シアン：左ズレ */
.kumonosu-title-main::before,
.kumonosu-title-sub::before {
	left: -3px;
	text-shadow: 2px 0 var(--kumonosu-accent-cyan);
	-webkit-text-fill-color: var(--kumonosu-accent-cyan);
	animation: kumonosu-slice-cyan var(--kumonosu-glitch-interval) infinite step-end;
	z-index: -1;
}
/* ピンク：右ズレ */
.kumonosu-title-main::after,
.kumonosu-title-sub::after {
	left: 3px;
	text-shadow: -2px 0 var(--kumonosu-accent-pink);
	-webkit-text-fill-color: var(--kumonosu-accent-pink);
	animation: kumonosu-slice-pink var(--kumonosu-glitch-interval) infinite step-end;
	z-index: -2;
}
/*===========================================
        アニメーションキーフレーム (kumonosu-)
===========================================*/
/* 全体のチラつき */
@keyframes kumonosu-flicker {
	0% {
		opacity: 0;
		transform: translateX(4px);
	}
	2% {
		opacity: 1;
		transform: translateX(-4px);
	}
	4% {
		opacity: 0.5;
	}
	6% {
		opacity: 1;
		transform: translateX(0);
	}
	100% {
		opacity: 1;
	}
}
/* シアンの断片化 */
@keyframes kumonosu-slice-cyan {
	0% {
		opacity: 1;
		clip-path: inset(80% 0 0 0);
		transform: translateX(-10px);
	}
	2% {
		clip-path: inset(10% 0 60% 0);
		transform: translateX(10px);
	}
	4% {
		clip-path: inset(40% 0 30% 0);
		transform: translateX(-5px);
	}
	6% {
		clip-path: inset(0 0 90% 0);
		transform: translateX(5px);
	}
	8% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
/* ピンクの断片化 */
@keyframes kumonosu-slice-pink {
	0% {
		opacity: 1;
		clip-path: inset(0 0 70% 0);
		transform: translateX(10px);
	}
	3% {
		clip-path: inset(50% 0 10% 0);
		transform: translateX(-10px);
	}
	5% {
		clip-path: inset(20% 0 50% 0);
		transform: translateX(5px);
	}
	7% {
		clip-path: inset(80% 0 0 0);
		transform: translateX(-5px);
	}
	9% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

<div class="bg-glow"></div>

<div class="animation-container">
    <div class="cube">
        <div class="cube-face front">FRONT</div>
        <div class="cube-face back">BACK</div>
        <div class="cube-face right">RIGHT</div>
        <div class="cube-face left">LEFT</div>
        <div class="cube-face top">TOP</div>
        <div class="cube-face bottom">BOTTOM</div>
    </div>
</div>

body {
    background-color: #050505;
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-family: 'Arial Black', sans-serif;
}

.animation-container {
    width: 200px;
    height: 200px;
    perspective: 1000px;
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: cubeRotate 10s infinite linear;
}

.cube-face {
    position: absolute;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 文字の設定: 純白 */
    color: #ffffff;
    font-weight: bold;
    font-size: 28px;
    text-transform: uppercase;
    /* 文字を白く光らせて際立たせる */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.4);
    
    backface-visibility: visible;
    
    /* 背景グラデーション (#3624ff から #ff3c3c) */
    background: linear-gradient(135deg, rgba(54, 36, 255, 0.25), rgba(255, 60, 60, 0.25));
    
    /* 枠線グラデーション */
    border: 3px solid;
    border-image: linear-gradient(135deg, #3624ff, #ff3c3c) 1;
    
    /* 外側と内側の光（青と赤の混合） */
    box-shadow: 0 0 20px rgba(54, 36, 255, 0.4), 
                inset 0 0 20px rgba(255, 60, 60, 0.4);
}

/* 3D 配置設定 */
.front  { transform: rotateY(0deg) translateZ(100px); }
.back   { transform: rotateY(180deg) translateZ(100px); }
.right  { transform: rotateY(90deg) translateZ(100px); }
.left   { transform: rotateY(-90deg) translateZ(100px); }
.top    { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }

/* 回転アニメーション */
@keyframes cubeRotate {
    0% { transform: rotateX(0deg) rotateY(0deg); }
    100% { transform: rotateX(360deg) rotateY(360deg); }
}

/* 背景にうっすらと光を配置 */
.bg-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(54, 36, 255, 0.1) 0%, rgba(255, 60, 60, 0.1) 50%, transparent 70%);
    filter: blur(80px);
    z-index: -1;
}

<div class="kumonosu-container">
	<button class="kumonosu-btn kumonosu-btn-blue">
		<span class="kumonosu-text">Button</span>
	</button>

	<button class="kumonosu-btn kumonosu-btn-mid">
		<span class="kumonosu-text">Button</span>
	</button>

	<button class="kumonosu-btn kumonosu-btn-red">
		<span class="kumonosu-text">Button</span>
	</button>
</div>

:root {
	--kumonosu-bg: #1a1a1a;
	--x: 220;
	--y: 235;
	--kumonosu-glow-size: 100px;
	--kumonosu-color-blue: #3624ff;
	--kumonosu-color-red: #ff3c3c;
	--kumonosu-color-mid: color-mix(in srgb,
			var(--kumonosu-color-blue),
			var(--kumonosu-color-red) 50%);
}
* {
	box-sizing: border-box;
}
body {
	margin: 0;
	min-height: 100vh;
	background-color: var(--kumonosu-bg);
}
/* レイアウト */
.kumonosu-container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	gap: 1.5rem;
	font-family: system-ui, -apple-system, sans-serif;
}
/* メインボタン */
.kumonosu-btn {
	position: relative;
	padding: 1.5rem 3rem;
	font-size: 1rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.1ch;
	color: transparent;
	cursor: pointer;
	border-radius: 1rem;
	border: 4px solid transparent;
	--kumonosu-btn-color: var(--kumonosu-color-mid);
	--kumonosu-glow-effect: radial-gradient(50% 50% at center,
			white,
			var(--kumonosu-btn-color),
			transparent) calc((var(--x) * 1px) - (var(--kumonosu-glow-size) / 2)) calc((var(--y) * 1px) - (var(--kumonosu-glow-size) / 2)) / var(--kumonosu-glow-size) var(--kumonosu-glow-size) no-repeat fixed;
	background:
		linear-gradient(var(--kumonosu-bg), var(--kumonosu-bg)) padding-box,
		var(--kumonosu-glow-effect),
		linear-gradient(black, black) border-box;
	transition: transform 0.2s;
	touch-action: none;
}
.kumonosu-btn-blue {
	--kumonosu-btn-color: var(--kumonosu-color-blue);
}
.kumonosu-btn-mid {
	--kumonosu-btn-color: var(--kumonosu-color-mid);
}
.kumonosu-btn-red {
	--kumonosu-btn-color: var(--kumonosu-color-red);
}
.kumonosu-btn:active {
	transform: scale(0.98);
}
/* 文字の発光 */
.kumonosu-text {
	background: var(--kumonosu-glow-effect), rgba(255, 255, 255, 0.2);
	-webkit-background-clip: text;
	background-clip: text;
}
/* 背後グロー */
.kumonosu-btn::after {
	content: "";
	position: absolute;
	inset: -4px;
	filter: blur(20px);
	background: var(--kumonosu-glow-effect);
	border-radius: 1rem;
	z-index: -1;
}
/* 内部質感 */
.kumonosu-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--kumonosu-bg);
	z-index: -1;
	border-radius: calc(1rem - 4px);
	box-shadow: 0 1px rgba(255, 255, 255, 0.15) inset;
}

const syncPointer = ({ x, y }) => {
	document.documentElement.style.setProperty('--x', x.toFixed(2));
	document.documentElement.style.setProperty('--y', y.toFixed(2));
};

window.addEventListener('pointermove', syncPointer);

syncPointer({
	x: window.innerWidth / 2,
	y: window.innerHeight / 2
});

<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>

@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;
}

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);
});

<main class="kumonosu-main-container">
  <svg class="kumonosu-svg-container">
    <defs>
      <filter id="kumonosu-turbulent-displace" colorInterpolationFilters="sRGB" x="-20%" y="-20%" width="140%" height="140%">
        <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="10" result="noise1" seed="1" />
        <feOffset in="noise1" dx="0" dy="0" result="offsetNoise1">
          <animate attributeName="dy" values="490; 0" dur="6s" repeatCount="indefinite" calcMode="linear" />
        </feOffset>

        <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="10" result="noise2" seed="1" />
        <feOffset in="noise2" dx="0" dy="0" result="offsetNoise2">
          <animate attributeName="dy" values="0; -490" dur="6s" repeatCount="indefinite" calcMode="linear" />
        </feOffset>

        <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="10" result="noise1" seed="2" />
        <feOffset in="noise1" dx="0" dy="0" result="offsetNoise3">
          <animate attributeName="dx" values="700; 0" dur="6s" repeatCount="indefinite" calcMode="linear" />
        </feOffset>

        <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="10" result="noise2" seed="2" />
        <feOffset in="noise2" dx="0" dy="0" result="offsetNoise4">
          <animate attributeName="dx" values="0; -700" dur="6s" repeatCount="indefinite" calcMode="linear" />
        </feOffset>

        <feComposite in="offsetNoise1" in2="offsetNoise2" result="part1" />
        <feComposite in="offsetNoise3" in2="offsetNoise4" result="part2" />
        <feBlend in="part1" in2="part2" mode="color-dodge" result="combinedNoise" />

        <feDisplacementMap in="SourceGraphic" in2="combinedNoise" scale="30" xChannelSelector="R" yChannelSelector="B" />
      </filter>
    </defs>
  </svg>

  <div class="kumonosu-card-container">
    <div class="kumonosu-inner-container">
      <div class="kumonosu-border-outer">
        <div class="kumonosu-main-card"></div>
      </div>
      <div class="kumonosu-glow-layer-1"></div>
      <div class="kumonosu-glow-layer-2"></div>
    </div>

    <div class="kumonosu-overlay-1"></div>
    <div class="kumonosu-overlay-2"></div>
    <div class="kumonosu-background-glow"></div>

    <div class="kumonosu-content-container">
      <div class="kumonosu-content-main">
        <p class="kumonosu-title">KUMONOSU Electric</p>
      </div>
    </div>
  </div>
</main>

/* CSS Variables */
:root {
  --kumonosu-electric-border-color: #ff3c3c;
  --kumonosu-electric-light-color: oklch(from var(--kumonosu-electric-border-color) l c h);
  --kumonosu-gradient-color: oklch(
    from var(--kumonosu-electric-border-color) 0.3 calc(c / 2) h / 0.4
  );
  --kumonosu-color-neutral-900: oklch(0.185 0 0);
  --kumonosu-card-padding: clamp(1.5rem, 6vw, 3rem);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  background-color: oklch(0.145 0 0);
  color: oklch(0.985 0 0);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
}

.kumonosu-main-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 20px;
}

.kumonosu-svg-container {
  position: absolute;
  width: 0;
  height: 0;
}

/* Card container */
.kumonosu-card-container {
  padding: 2px;
  border-radius: 24px;
  position: relative;
  background: linear-gradient(
      -30deg,
      var(--kumonosu-gradient-color),
      transparent,
      var(--kumonosu-gradient-color)
    ),
    linear-gradient(
      to bottom,
      var(--kumonosu-color-neutral-900),
      var(--kumonosu-color-neutral-900)
    );
  width: 100%;
  max-width: 500px; /* 横長設定 */
}

.kumonosu-inner-container {
  position: relative;
  width: 100%;
}

.kumonosu-border-outer {
  border: 2px solid rgba(221, 132, 72, 0.5);
  border-radius: 24px;
  padding-right: 4px;
  padding-bottom: 4px;
}

.kumonosu-main-card {
  width: 100%;
  aspect-ratio: 2 / 1; /* 横長比率 */
  border-radius: 24px;
  border: 2px solid var(--kumonosu-electric-border-color);
  margin-top: -4px;
  margin-left: -4px;
  filter: url(#kumonosu-turbulent-displace);
}

/* Glow layers */
.kumonosu-glow-layer-1,
.kumonosu-glow-layer-2 {
  border-radius: 24px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.kumonosu-glow-layer-1 {
  border: 2px solid rgba(221, 132, 72, 0.6);
  filter: blur(1px);
}

.kumonosu-glow-layer-2 {
  border: 2px solid var(--kumonosu-electric-light-color);
  filter: blur(4px);
}

/* Overlays */
.kumonosu-overlay-1,
.kumonosu-overlay-2 {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  mix-blend-mode: overlay;
  transform: scale(1.05);
  filter: blur(16px);
  pointer-events: none;
}

.kumonosu-overlay-1 {
  opacity: 1;
  background: linear-gradient(-30deg, white, transparent 30%, transparent 70%, white);
}

.kumonosu-overlay-2 {
  opacity: 0.5;
  background: linear-gradient(-30deg, white, transparent 30%, transparent 70%, white);
}

.kumonosu-background-glow {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  filter: blur(32px);
  transform: scale(1.1);
  opacity: 0.3;
  z-index: -1;
  background: linear-gradient(
    -30deg,
    var(--kumonosu-electric-light-color),
    transparent,
    var(--kumonosu-electric-border-color)
  );
}

/* Content container */
.kumonosu-content-container {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.kumonosu-content-main {
  display: flex;
  flex-direction: column;
  padding: var(--kumonosu-card-padding);
  height: 100%;
}

/* Typography */
.kumonosu-title {
  font-size: clamp(1.5rem, 6vw, 2.5rem);
  line-height: 1.1;
  font-weight: 500;
  margin-top: auto; /* 下側に配置 */
  pointer-events: auto;
}

<div class="kumonosu-grid-background"></div>
<div class="kumonosu-btn-box">
    <button class="kumonosu-btn"> Button </button>
</div>

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #000;
    overflow: hidden;
}
/* グリッド背景（動画の雰囲気を出すため） */
.kumonosu-grid-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: -1;
}
.kumonosu-btn-box {
    position: relative;
    display: inline-block;
}
/* ボタン本体 */
.kumonosu-btn {
    position: relative;
    color: rgba(255, 255, 255, 0.4);
    /* 消灯時は暗め */
    font-size: 24px;
    width: 176px;
    height: 65px;
    line-height: 65px;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.15rem;
    display: block;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    transition: all 0.2s ease;
    z-index: 10;
    outline: none;
    cursor: pointer;
}
/* 蛍光灯の点滅アニメーション */
@keyframes neon-flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        color: #fff;
        border-color: #fff;
        box-shadow:
            0 0 10px #fff,
            inset 0 0 10px #fff,
            0 0 20px rgba(255, 255, 255, 0.2);
        text-shadow: 0 0 10px #fff, 0 0 20px rgba(255, 255, 255, 0.5);
    }
    20%, 24%, 55% {
        color: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.1);
        box-shadow: none;
        text-shadow: none;
    }
}
/* 床の反射光の点滅アニメーション */
@keyframes reflection-flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        opacity: 0.7;
    }
    20%, 24%, 55% {
        opacity: 0;
    }
}
.kumonosu-btn:hover {
    animation: neon-flicker 1.5s infinite alternate;
}
/* 床の反射光（ボタンの下に配置） */
.kumonosu-btn-box::before {
    content: "";
    position: absolute;
    background: #fff;
    top: 100%;
    left: -20%;
    /* ボタンより横に広げる */
    width: 140%;
    height: 120px;
    /* 提示されたコードのテクニック：パースをつけて手前に倒す */
    transform: perspective(1.5em) rotateX(40deg) scale(1, 0.35);
    filter: blur(1.5em);
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 1;
}
.kumonosu-btn-box:hover::before {
    opacity: 0.7;
    animation: reflection-flicker 1.5s infinite alternate;
}