Home
#mxh { font-family: ‘Space Mono’, ui-monospace, ‘Courier New’, monospace; }
#mxh-bg { position: fixed; inset: 0; background: #000; z-index: 0; }
#mxh-canvas { position: fixed; inset: 0; z-index: 1; display: block; opacity: 0.6; }
#mxh-veil { position: fixed; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.15) 100%); pointer-events: none; }
#mxh-content { position: relative; z-index: 3; min-height: 100svh; box-sizing: border-box; display: flex; flex-direction: column; padding: clamp(24px, 5vh, 56px) clamp(20px, 8vw, 120px); max-width: 1040px; }
#mxh ::selection { background: #33ff77; color: #000; }
#mxh .mxh-prompt { display: flex; align-items: center; gap: 10px; font-size: 14px; letter-spacing: 0.06em; }
#mxh .mxh-host { color: #5aff8f; }
#mxh .mxh-path { color: rgba(160,255,180,0.5); }
#mxh .mxh-cursor { display: inline-block; width: 9px; height: 17px; background: #33ff77; animation: mxh-blink 1.1s steps(1) infinite; }
@keyframes mxh-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
#mxh .mxh-main { margin: auto 0; padding: 48px 0; }
#mxh .mxh-epigraph { color: #74b183; font-size: 15px; letter-spacing: 0.08em; line-height: 1.7; max-width: 54ch; margin: 0 0 44px; }
#mxh nav { display: flex; flex-direction: column; }
#mxh nav a { display: flex; gap: clamp(14px, 3vw, 28px); align-items: baseline; text-decoration: none; padding: clamp(18px, 3vh, 26px) 0; border-top: 1px solid rgba(51,255,119,0.18); color: #b9f6c8; transition: color 160ms ease, transform 160ms ease, text-shadow 160ms ease; }
#mxh nav a:last-child { border-bottom: 1px solid rgba(51,255,119,0.18); }
#mxh nav a:hover { color: #ecfff1; transform: translateX(8px); text-shadow: 0 0 22px rgba(51,255,119,0.55); }
#mxh nav a:focus-visible { outline: 2px solid #33ff77; outline-offset: 4px; }
#mxh .mxh-idx { color: #3f7a4f; font-size: 13px; min-width: 36px; }
#mxh .mxh-entry { display: flex; flex-direction: column; gap: 8px; }
#mxh .mxh-line { font-size: clamp(19px, 2.3vw, 29px); line-height: 1.4; }
#mxh .mxh-slug { font-size: 13px; letter-spacing: 0.1em; opacity: 0.55; }
#mxh .mxh-foot { font-size: 12.5px; color: rgba(160,255,180,0.4); letter-spacing: 0.1em; }
@media (prefers-reduced-motion: reduce) { #mxh .mxh-cursor { animation: none; } }
(function () {
var canvas = document.getElementById(‘mxh-canvas’);
var ctx = canvas.getContext(‘2d’);
var glyphs = ‘アィウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワン0123456789*+=@#’;
var COLOR = ‘#33ff77’, HEAD = ‘#eaffef’, FS = 18, SPEED = 1;
var dpr = Math.min(window.devicePixelRatio || 1, 2);
var w = 0, h = 0, cols = 0, drops = [];
function resize() {
w = window.innerWidth; h = window.innerHeight;
canvas.width = w * dpr; canvas.height = h * dpr;
canvas.style.width = w + ‘px’; canvas.style.height = h + ‘px’;
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
cols = Math.ceil(w / FS);
drops = [];
for (var i = 0; i < cols; i++) drops.push(Math.floor(Math.random() * -h / FS));
ctx.fillStyle = '#000'; ctx.fillRect(0, 0, w, h);
}
resize();
window.addEventListener('resize', resize);
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
ctx.font = FS + 'px monospace';
for (var i = 0; i < cols; i++) {
var len = 6 + Math.random() * 18, start = Math.random() * h / FS;
for (var j = 0; j < len; j++) {
ctx.globalAlpha = Math.max(0, 1 – j / len) * 0.8;
ctx.fillStyle = j === 0 ? HEAD : COLOR;
ctx.fillText(glyphs.charAt(Math.floor(Math.random() * glyphs.length)), i * FS, (start – j) * FS);
}
}
ctx.globalAlpha = 1;
return;
}
var last = 0;
function tick(now) {
requestAnimationFrame(tick);
if (now – last < 66 / SPEED) return;
last = now;
ctx.fillStyle = 'rgba(0,0,0,0.10)';
ctx.fillRect(0, 0, w, h);
ctx.font = FS + 'px monospace';
for (var i = 0; i < cols; i++) {
var y = drops[i] * FS;
ctx.fillStyle = Math.random() h && Math.random() > 0.975) drops[i] = Math.floor(Math.random() * -20);
else drops[i]++;
}
}
requestAnimationFrame(tick);
})();
... 