:root{--cream:#eee8dc;--ink:#171717;--signal:#dcff00;--tape:#1b1b1b;--line:rgba(23,23,23,.25)}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;overflow:hidden;background:var(--cream);color:var(--ink);font-family:Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
.site-shell{position:relative;isolation:isolate;min-height:100svh;padding:2rem clamp(1.25rem,3vw,3.5rem);display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}
.meta,footer{position:relative;z-index:6;display:flex;justify-content:space-between;gap:1.5rem;font:500 clamp(.66rem,.75vw,.82rem)/1.3 "Roboto Mono",monospace;letter-spacing:.08em}
.meta{padding-bottom:1rem;border-bottom:1px solid var(--line)}
.tapes{position:absolute;inset:-10%;z-index:1;pointer-events:none;transform:rotate(-5deg)}
.tape{position:absolute;left:-20%;width:140%;height:clamp(2.7rem,4.7vw,5rem);display:flex;align-items:center;overflow:hidden;background:var(--tape);color:var(--signal);box-shadow:0 .6rem 1.5rem rgba(0,0,0,.16);font:500 clamp(.8rem,1.2vw,1.15rem)/1 "Roboto Mono",monospace;letter-spacing:.12em;white-space:nowrap}
.tape:after{content:"";position:absolute;inset:0;border-top:1px dashed rgba(238,232,220,.4);border-bottom:1px dashed rgba(238,232,220,.4);margin:.42rem 0}
.tape-track{min-width:max-content;animation:travel 21s linear infinite}
.tape-track.reverse{animation-direction:reverse;animation-duration:25s}
.tape-one{top:12%;transform:rotate(9deg)}
.tape-two{top:37%;transform:rotate(-12deg);background:var(--signal);color:var(--ink)}
.tape-two:after{border-color:rgba(23,23,23,.35)}
.tape-three{top:62%;transform:rotate(14deg)}
.tape-four{top:79%;transform:rotate(-7deg);background:var(--cream);color:var(--ink);border:2px solid var(--ink)}
.tape-four:after{border-color:rgba(23,23,23,.3)}
.centerpiece{position:relative;z-index:4;align-self:center;justify-self:center;width:min(92vw,58rem);display:grid;justify-items:center;text-align:center}
.logo-wrap{position:relative;width:min(47vw,21rem);aspect-ratio:1;display:grid;place-items:center;animation:float 4.6s ease-in-out infinite}
.logo{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1.1rem 1rem rgba(0,0,0,.18));transition:transform .18s ease-out}
.logo-shadow{position:absolute;z-index:1;width:72%;height:17%;bottom:2%;border-radius:50%;background:rgba(23,23,23,.24);filter:blur(18px);animation:shadow 4.6s ease-in-out infinite}
h1{margin:1.2rem 0 0;font:500 clamp(.78rem,1.5vw,1.2rem)/1.45 "Roboto Mono",monospace;letter-spacing:.11em;background:var(--cream);padding:.55rem .85rem;box-shadow:0 0 0 1px var(--ink)}
h1 i{font-style:normal;color:#6f6b62}
.centerpiece p{margin:1.15rem 0 0;max-width:34rem;font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.4;background:var(--cream);padding:.25rem .5rem}
footer{align-items:flex-end;padding-top:1rem;border-top:1px solid var(--line)}
footer a{position:relative}
footer a:after{content:"";position:absolute;left:0;bottom:-.35rem;width:0;height:1px;background:currentColor;transition:width .25s}
footer a:hover:after{width:100%}
@keyframes travel{to{transform:translateX(-50%)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-1rem) rotate(1.2deg)}}
@keyframes shadow{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(.78);opacity:.28}}
@media(max-width:700px){.site-shell{padding:1.25rem;min-height:100svh}.meta span:last-child{display:none}.tapes{inset:-8% -30%;transform:rotate(-4deg)}.tape{left:-45%;width:190%;height:3rem;font-size:.72rem}.tape-one{top:15%}.tape-two{top:38%}.tape-three{top:63%}.tape-four{top:80%}.logo-wrap{width:min(72vw,18rem)}h1{max-width:21rem;font-size:.72rem;line-height:1.65;letter-spacing:.075em}.centerpiece p{max-width:20rem;font-size:1rem}footer{display:grid;grid-template-columns:1fr auto;gap:.7rem}footer>span{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){.tape-track,.logo-wrap,.logo-shadow{animation:none!important}.logo{transition:none}}