*{margin:0;padding:0;box-sizing:border-box}
html{image-rendering:pixelated}
html,body{width:100%;height:100%;overflow:hidden;background:#fff}
body{font-family:ui-monospace,Menlo,monospace;background:#fff}
#site{position:fixed;inset:0;width:25vw;height:25vh;transform:scale(4);transform-origin:top left;image-rendering:pixelated;image-rendering:crisp-edges;overflow:hidden;background:#fff}
#c{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges}
.hero{position:absolute;left:46%;top:39%;transform:translate(-50%,-50%);pointer-events:none;z-index:5;width:max-content;max-width:90vw;mix-blend-mode:difference}
.hero h1{display:flex;flex-direction:column;font-size:22px;font-weight:900;letter-spacing:.16em;line-height:.9;color:#fff;text-align:left}
.hero .sub-row{display:block;text-align:right;margin-top:7px;align-self:flex-end;padding-right:1px}
#butterfly{font-size:5px;letter-spacing:.28em;font-weight:800}
.z-text{display:inline-block;transform-style:preserve-3d}
#adonis .z-text{transform:rotateX(14deg) rotateY(-18deg)}
#butterfly .z-text{transform:rotateX(-10deg) rotateY(16deg)}
#enterText .z-text{transform:rotateX(10deg) rotateY(-10deg)}
.z-layers{display:inline-block;position:relative;transform-style:preserve-3d}
.z-layer{display:block;position:absolute;top:0;left:0;transform-style:preserve-3d;pointer-events:none}
.z-layer:first-child{position:relative;color:#fff}
.z-layer:not(:first-child){color:#fff;-webkit-font-smoothing:none}
.enter{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.24);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:opacity .55s ease,visibility .55s ease;cursor:pointer}
.enter.hidden{opacity:0;visibility:hidden;pointer-events:none}
.enter .enter-word{text-align:center;line-height:1.4}
.enter #enterText{display:block;font-size:7px;font-weight:900;letter-spacing:.34em;color:#000}
.enter #enterText .z-layer:first-child{color:#000}
.enter #enterText .z-layer:not(:first-child){color:#2b2b2b}
.bars{position:absolute;right:6px;bottom:6px;z-index:10;display:flex;align-items:end;gap:1.5px;opacity:0;transition:opacity .4s;pointer-events:none;mix-blend-mode:difference}
.bars.on{opacity:1}
.bars i{display:block;width:1.5px;height:5px;background:#fff;image-rendering:pixelated}
.bars.paused i{animation:idle 1s ease-in-out infinite}
.bars.paused i:nth-child(2){animation-delay:.12s}
.bars.paused i:nth-child(3){animation-delay:.24s}
.bars.paused i:nth-child(4){animation-delay:.08s}
.bars.paused i:nth-child(5){animation-delay:.18s}
.bars.paused i:nth-child(6){animation-delay:.3s}
@keyframes idle{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.track{position:absolute;left:6px;bottom:6px;z-index:10;font-size:2.6px;letter-spacing:.18em;font-weight:800;color:#000;opacity:.45;pointer-events:none}
@media(max-width:900px){.hero{left:50%;top:40%}.hero h1{font-size:16px}#butterfly{font-size:4px}.enter #enterText{font-size:5.5px}}