:root{--bg:#fff;--fg:#222;--sub:#666;--link:#0b5cad;--blob-a:.28}
@media (prefers-color-scheme:dark){:root{--bg:#111;--fg:#eee;--sub:#aaa;--link:#6cb2ff;--blob-a:.38}}
html{height:100%}
body{margin:0;font-family:"DotGothic16",-apple-system,"Hiragino Sans",sans-serif;line-height:1.7;color:var(--fg);background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 16px;box-sizing:border-box;min-height:100%;background-image:radial-gradient(40vmax 40vmax at 30% 30%,rgba(0,183,255,var(--blob-a)),transparent 70%),radial-gradient(40vmax 40vmax at 72% 70%,rgba(255,45,117,var(--blob-a)),transparent 70%);background-attachment:fixed}
main{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
h1{position:relative;margin:0;font-size:clamp(4rem,18vw,9rem);font-weight:800;letter-spacing:-.04em;line-height:1.1;user-select:none;-webkit-user-select:none;cursor:default;background:linear-gradient(90deg,#ff2d75,#ff8a00,#ffe600,#00e08a,#00b7ff,#7b5cff,#ff2d75);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:flow 6s linear infinite}
@keyframes flow{to{background-position:300% 0}}
h1.fx-on{background:none;animation:none;font-size:0;line-height:0;touch-action:none}
h1.fx-on+p.sub{margin-top:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
p.sub{color:var(--sub);margin:20px 0 0}
p.contact{margin:2em 0 0}
a{color:var(--link)}
footer{margin-top:3em;color:var(--sub);font-size:.85rem}
.fx-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}