:root{
	--bg:#ff9d6f;
	--fg:#111111;
	/* spot palette defaults (green) */
	--spot-h: 139;
	--spot-s: 100%;
	--spot-l: 72%;
	--shadow-color: 20deg 67% 44%;
	--shadow-elevation-low:
		0.6px 0.6px 1px hsl(var(--shadow-color) / 0.33),
		1px 1px 1.6px -1.2px hsl(var(--shadow-color) / 0.33),
		2.4px 2.5px 3.9px -2.5px hsl(var(--shadow-color) / 0.33);
	--shadow-elevation-medium:
		0.6px 0.6px 1px hsl(var(--shadow-color) / 0.35),
		2px 2.1px 3.3px -0.8px hsl(var(--shadow-color) / 0.35),
		4.9px 5.1px 8px -1.7px hsl(var(--shadow-color) / 0.35),
		11.9px 12.5px 19.4px -2.5px hsl(var(--shadow-color) / 0.35);
	--shadow-elevation-high:
		0.6px 0.6px 1px hsl(var(--shadow-color) / 0.37),
		3.9px 4.1px 6.4px -0.4px hsl(var(--shadow-color) / 0.37),
		7.6px 8px 12.4px -0.8px hsl(var(--shadow-color) / 0.37),
		13.3px 14px 21.7px -1.2px hsl(var(--shadow-color) / 0.37),
		22.6px 23.7px 36.8px -1.7px hsl(var(--shadow-color) / 0.37),
		37.2px 39px 60.6px -2.1px hsl(var(--shadow-color) / 0.37),
		58.6px 61.5px 95.6px -2.5px hsl(var(--shadow-color) / 0.37);
 
  /* layered text shadow for per-letter depth */
  --text-shadow: 0.6px 0.6px 1px hsl(var(--shadow-color) / 0.33), 2px 2px 3px hsl(var(--shadow-color) / 0.25), 6px 6px 14px hsl(var(--shadow-color) / 0.18);
}
*{box-sizing:border-box}
html,body{height:100%}
html{background:var(--bg)}
.font-loaded body{font-family: 'Luxurious Roman', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
@font-face{
	font-family: 'Luxurious Roman';
	src: url('fonts/LuxuriousRoman-Regular.woff2') format('woff2'),
			 url('fonts/LuxuriousRoman-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
body{margin:0;display:flex;align-items:center;justify-content:center;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;min-height:100vh;background:var(--bg);color:var(--fg)}
.wrap{width:min(680px,92%);text-align:center;padding:6vh 0}
.name{font-size:clamp(28px,6vw,48px);margin:0 0 2rem;font-weight:600;font-family:'Luxurious Roman', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}
.name{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0.45rem}

/* Each letter becomes a boxed item with depth */
.name .letter{display:inline-block;padding:0 0.06em;background:transparent;color:var(--fg);border-radius:0;line-height:1;text-shadow:var(--text-shadow);will-change:transform,text-shadow}
.name .letter.space{background:transparent;box-shadow:none;padding:0;width:0.4rem}
.buttons{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:560px){.buttons{grid-template-columns:1fr 1fr}}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:1rem 1.25rem;font-size:1.125rem;text-decoration:none;border:2px solid var(--fg);color:var(--fg);border-radius:10px;background:transparent;transition:transform .12s ease,background .12s ease}
.btn:hover{transform:translateY(-3px);background:rgba(0,0,0,.04)}
.btn:active{transform:translateY(0)}
.btn:focus{outline:3px solid rgba(0,0,0,.12);outline-offset:3px}

/* Fuzzy particle buttons */
.fuzzy{position:relative;overflow:visible}
.fuzzy .btn-inner{position:relative;z-index:2}
.spots{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.spot{position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%) scale(0.6);opacity:0;z-index:1}
.spot.spew{animation: spew 900ms cubic-bezier(.2,.9,.2,1) forwards;animation-iteration-count:1}

@keyframes spew{
	0%{transform:translate(-50%,-50%) scale(.4);opacity:0}
	60%{opacity:.9}
	100%{transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1);opacity:0}
}

/* performance hints and subtle blur for a softer, more seamless look */
.spot{will-change:transform,opacity;filter:blur(.4px)}

/* 16 spots with forest/olive green shades and percentage offsets so they scale with button size */
.spot:nth-child(1){--tx:-37%;--ty:-6%;animation-delay:0s}
 
.spot:nth-child(2){--tx:-28%;--ty:6%;animation-delay:.04s}
.spot:nth-child(3){--tx:-15%;--ty:-13%;animation-delay:.06s}
.spot:nth-child(4){--tx:-6%;--ty:-20%;animation-delay:.08s}
.spot:nth-child(5){--tx:6%;--ty:-23%;animation-delay:.10s}
.spot:nth-child(6){--tx:18%;--ty:-14%;animation-delay:.12s}
.spot:nth-child(7){--tx:29%;--ty:-3%;animation-delay:.14s}
.spot:nth-child(8){--tx:35%;--ty:9%;animation-delay:.16s}
.spot:nth-child(9){--tx:27%;--ty:20%;animation-delay:.18s}
.spot:nth-child(10){--tx:14%;--ty:26%;animation-delay:.20s}
.spot:nth-child(11){--tx:2%;--ty:30%;animation-delay:.22s}
.spot:nth-child(12){--tx:-12%;--ty:23%;animation-delay:.24s}
.spot:nth-child(13){--tx:-23%;--ty:15%;animation-delay:.26s}
.spot:nth-child(14){--tx:-30%;--ty:6%;animation-delay:.28s}
.spot:nth-child(15){--tx:-18%;--ty:-6%;animation-delay:.30s}
.spot:nth-child(16){--tx:4%;--ty:-12%;animation-delay:.32s}

/* Slightly enlarge button inner when hovered for contrast */
.fuzzy:hover .btn-inner{transform:translateY(-3px);transition:transform .12s}