@font-face{
font-family:'PP Neue Montreal';
src:url('../assets/ppneuemontreal-thin.otf') format('opentype');
font-weight:100;
font-style:normal;
font-display:swap}@font-face{
font-family:'PP Neue Montreal';
src:url('../assets/ppneuemontreal-book.otf') format('opentype');
font-weight:400;
font-style:normal;
font-display:swap}@font-face{
font-family:'PP Neue Montreal';
src:url('../assets/ppneuemontreal-italic.otf') format('opentype');
font-weight:400;
font-style:italic;
font-display:swap}@font-face{
font-family:'PP Neue Montreal';
src:url('../assets/ppneuemontreal-medium.otf') format('opentype');
font-weight:500;
font-style:normal;
font-display:swap}@font-face{
font-family:'PP Neue Montreal';
src:url('../assets/ppneuemontreal-semibolditalic.otf') format('opentype');
font-weight:600;
font-style:italic;
font-display:swap}@font-face{
font-family:'PP Neue Montreal';
src:url('../assets/ppneuemontreal-bold.otf') format('opentype');
font-weight:700;
font-style:normal;
font-display:swap}*{
margin:0;
padding:0;
box-sizing:border-box}html{
width:100%;
height:100%}body{
width:100%;
min-height:100%;
background-color:#ffffff;
font-family:'PP Neue Montreal',Arial,sans-serif;
font-weight:400;
color:#0a0a0a}.scroll-stage{
position:relative;
height:100lvh}.section-w{
position:relative;
isolation:isolate;
overflow:hidden;
width:100%;
height:100lvh;
min-height:480px;
background:transparent}.section-w::before{
content:"";
position:absolute;
inset:0;
background:#000;
z-index:-1}.video-hero-bg{
position:absolute;
top:50%;
left:0;
transform:translateY(-50%);
width:100%;
height:auto;
z-index:0;
display:block}.mask-reveal-canvas{
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
display:block}.section.hero-home{
position:relative;
z-index:0;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center}.container.hero-home{
width:100%;
height:100%;
padding:0 max(20px,1.25vw)}.tyler-hero-w{
width:100%;
height:100%}.tyler-hero-svg{
width:100%;
height:100%;
display:block;
object-fit:contain;
color:#0a0a0a}.corner-copy{
position:absolute;
top:max(20px,1.25vw);
left:max(30px,1.25vw);
display:flex;
flex-direction:column;
gap:.3em;
pointer-events:none;
user-select:none}.hello-text{
font-family:'PP Neue Montreal',Arial,sans-serif;
font-weight:500;
font-size:clamp(28px,3.2vw,48px);
letter-spacing:.01em;
color:#fff;
mix-blend-mode:difference;
z-index:2;
transform:translateY(24px);
opacity:0}.corner-copy-bl{
position:absolute;
bottom:calc(max(20px,1.25vw) + env(safe-area-inset-bottom));
left:max(30px,1.25vw);
display:flex;
align-items:center;
gap:.5em;
pointer-events:none;
user-select:none}.see-what-text{
font-family:'PP Neue Montreal',Arial,sans-serif;
font-weight:500;
font-size:clamp(12px,1.05vw,15px);
letter-spacing:.14em;
text-transform:uppercase;
color:#fff;
mix-blend-mode:difference;
z-index:2;
transform:translateY(24px);
opacity:0}.see-what-arrow{
display:block;
width:clamp(12px,1vw,15px);
height:clamp(12px,1vw,15px);
fill:#fff;
mix-blend-mode:difference;
z-index:2;
transform:translateY(24px);
opacity:0}.corner-copy-br{
position:absolute;
bottom:calc(max(20px,1.25vw) + env(safe-area-inset-bottom));
right:max(30px,1.25vw);
display:flex;
align-items:center;
gap:.6em;
pointer-events:none;
user-select:none}@media (max-width:640px){
.corner-copy-br{
top:auto;
right:auto;
left:max(30px,1.25vw);
bottom:calc(max(20px,1.25vw) + 28px + env(safe-area-inset-bottom))}}.powered-by-text{
font-family:'PP Neue Montreal',Arial,sans-serif;
font-weight:500;
font-size:clamp(12px,1.05vw,15px);
letter-spacing:.14em;
text-transform:uppercase;
color:#fff;
mix-blend-mode:difference;
z-index:2;
transform:translateY(24px);
opacity:0}.powered-by-icon{
display:block;
width:clamp(26px,2.2vw,34px);
height:clamp(26px,2.2vw,34px);
fill:#fff;
mix-blend-mode:difference;
z-index:2;
transform:translateY(24px);
opacity:0}.load-curtain-full{
position:absolute;
inset:0;
z-index:3;
background:#fff;
pointer-events:none}.tyler-word-wrap{
position:absolute;
z-index:5;
display:flex;
justify-content:center;
align-items:flex-start;
pointer-events:none}.tyler-letter-clone{
display:block}.tyler-letter-track{
display:grid;
grid-template-columns:0fr;
min-width:0;
transition:grid-template-columns 0.4s cubic-bezier(0.65,0,0.35,1)}.tyler-word-wrap.grown .tyler-letter-track{
grid-template-columns:1fr}.tyler-letter-inner{
overflow:hidden;
min-width:0;
opacity:0;
transition:opacity 0.25s ease}.tyler-word-wrap.grown .tyler-letter-inner{
opacity:1}.tyler-letter-track:nth-of-type(1){
transition-delay:0s}.tyler-letter-track:nth-of-type(1) .tyler-letter-inner{
transition-delay:0.02s}.tyler-letter-track:nth-of-type(2){
transition-delay:0.09s}.tyler-letter-track:nth-of-type(2) .tyler-letter-inner{
transition-delay:0.11s}.tyler-letter-track:nth-of-type(3){
transition-delay:0.18s}.tyler-letter-track:nth-of-type(3) .tyler-letter-inner{
transition-delay:0.2s}.tyler-letter-track:nth-of-type(4){
transition-delay:0.27s}.tyler-letter-track:nth-of-type(4) .tyler-letter-inner{
transition-delay:0.29s}html.lenis,html.lenis body{
height:auto}.lenis.lenis-smooth{
scroll-behavior:auto !important}.lenis.lenis-stopped{
overflow:hidden}.code-section{
position:relative;
min-height:100lvh;
background:transparent;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center}.code-section::before{
content:"";
position:absolute;
inset:0;
background:#0a0a0a;
z-index:-1}.matrix-canvas{
position:absolute;
inset:0;
width:100%;
height:100%;
opacity:0;
z-index:1}.code-word{
position:relative;
z-index:2;
display:flex;
pointer-events:none}.code-char{
display:inline-block;
font-weight:700;
font-size:clamp(72px,14vw,220px);
line-height:1;
letter-spacing:-0.02em;
color:#ffffff;
opacity:0;
will-change:transform,opacity}.code-cards{
position:absolute;
inset:0;
z-index:2;
pointer-events:none;
perspective:900px}.code-card{
position:absolute;
opacity:0;
display:flex;
flex-direction:column;
align-items:center;
gap:clamp(8px,1.2vw,12px);
width:clamp(84px,11vw,128px);
padding:clamp(14px,1.8vw,20px) clamp(8px,1.2vw,14px);
border:1.5px solid rgba(255,255,255,0.85);
border-radius:14px;
will-change:transform,opacity}.code-card svg{
width:clamp(26px,3.4vw,38px);
height:clamp(26px,3.4vw,38px);
fill:#ffffff}.code-card span{
font-size:clamp(11px,1.15vw,13px);
font-weight:600;
letter-spacing:0.01em;
color:#ffffff;
text-align:center;
white-space:nowrap}.creative-section-wrap{
position:relative;
height:780vh}.creative-sticky{
position:relative;
width:100%;
height:100lvh;
overflow:hidden;
background:transparent}.creative-sticky::before{
content:"";
position:absolute;
inset:0;
background:#000000;
z-index:-1}.creative-video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
display:block;
z-index:2}.creative-video-embedded{
position:absolute;
inset:0;
width:100%;
height:100%;
top:auto;
left:auto}.sound-toggle{
position:absolute;
top:max(14px,1.5vw);
left:50%;
transform:translateX(-50%);
z-index:5;
display:flex;
align-items:center;
gap:7px;
background:#ffffff;
border:1px solid rgba(10,10,10,0.1);
border-radius:999px;
padding:5px 10px 5px 12px;
cursor:pointer;
box-shadow:0 4px 14px rgba(0,0,0,0.18)}.sound-toggle-label{
font-size:10px;
font-weight:700;
letter-spacing:0.08em;
text-transform:uppercase;
color:#0a0a0a}.sound-toggle-switch{
position:relative;
width:30px;
height:16px;
border-radius:8px;
background:rgba(10,10,10,0.15);
transition:background 0.2s ease;
flex-shrink:0}.sound-toggle-knob{
position:absolute;
top:2px;
left:2px;
width:12px;
height:12px;
border-radius:50%;
background:#ffffff;
box-shadow:0 1px 3px rgba(0,0,0,0.3);
transition:transform 0.2s ease}.sound-toggle[aria-pressed="true"] .sound-toggle-switch{
background:#0a0a0a}.sound-toggle[aria-pressed="true"] .sound-toggle-knob{
transform:translateX(14px)}.carousel-3d{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
z-index:1}.carousel-track{
position:relative;
width:0;
height:0;
transform-style:preserve-3d}.carousel-card{
position:absolute;
top:50%;
left:50%;
width:70vw;
aspect-ratio:5 / 3;
margin:-21vw 0 0 -35vw;
border-radius:8px;
overflow:hidden;
background:#141414;
box-shadow:0 30px 80px rgba(0,0,0,0.5)}@media (max-width:991px){
.carousel-card{
aspect-ratio:5 / 6;
margin-top:-42vw}}@media (max-width:479px){
.carousel-card{
aspect-ratio:5 / 7;
margin-top:-49vw}}.carousel-card-image{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
display:block}.carousel-card-scrim{
position:absolute;
inset:0;
background:linear-gradient(to top,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 55%);
pointer-events:none;
z-index:3}.carousel-text-viewport{
position:absolute;
inset:0;
overflow:hidden;
z-index:3;
pointer-events:none;
opacity:0}.carousel-text-item{
height:100lvh;
display:flex;
align-items:center;
justify-content:center;
text-align:center}.carousel-text-title{
font-weight:700;
font-size:clamp(38px,7vw,108px);
line-height:1;
letter-spacing:-0.01em;
text-transform:uppercase;
color:#ffffff}.cloud-section-wrap{
position:relative;
height:1100vh}.cloud-sticky{
position:relative;
width:100%;
height:100lvh;
overflow:hidden;
background:transparent}.cloud-sticky::before{
content:"";
position:absolute;
inset:0;
background:#000000;
z-index:-1}.cloud-video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
display:block;
z-index:1}.cloud-video-slot{
position:absolute;
top:32px;
left:32px;
aspect-ratio:16 / 9;
height:clamp(150px,21vh,240px);
width:auto;
visibility:hidden}@media (max-width:640px){
.cloud-video-slot{
left:50%;
transform:translateX(-50%)}}.cloud-icons{
position:absolute;
z-index:2;
display:flex;
flex-wrap:wrap;
align-content:center;
gap:30px;
pointer-events:none}@media (max-width:640px){
.cloud-icons{
justify-content:center}.cloud-icon:last-child{
display:none}}.cloud-icon{
width:clamp(18px,1.8vw,26px);
height:clamp(18px,1.8vw,26px);
opacity:0;
will-change:opacity,transform}.cloud-icon svg{
width:100%;
height:100%;
fill:#ffffff}.cloud-title{
position:absolute;
top:50%;
left:50%;
z-index:2;
display:flex;
pointer-events:none;
font-size:clamp(64px,13vw,200px)}.cloud-letter{
display:inline-block;
font-weight:700;
font-size:1em;
line-height:1;
letter-spacing:-0.02em;
color:#000000;
opacity:1;
will-change:opacity,transform}.terminal-window{
position:absolute;
top:50%;
left:50%;
z-index:4;
width:min(960px,88vw);
height:min(560px,62vh);
display:flex;
flex-direction:column;
background:#1e1e1e;
border-radius:10px;
overflow:hidden;
opacity:0;
box-shadow:0 40px 80px rgba(0,0,0,0.55),0 10px 24px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.08);
pointer-events:none}.terminal-titlebar{
position:relative;
flex-shrink:0;
display:flex;
align-items:center;
gap:8px;
padding:12px 14px;
background:#2b2b2b;
border-bottom:1px solid rgba(255,255,255,0.06)}.terminal-dot{
width:12px;
height:12px;
border-radius:50%;
flex-shrink:0}.terminal-dot-red{
background:#ff5f57}.terminal-dot-yellow{
background:#febc2e}.terminal-dot-green{
background:#28c840}.terminal-title{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
font-size:12px;
color:rgba(255,255,255,0.45)}.terminal-body{
flex:1;
padding:16px 18px;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
font-size:clamp(11px,1.3vw,16px);
line-height:1.65;
color:#d4d4d4;
overflow:hidden}.terminal-line{
white-space:pre-wrap;
word-break:break-word}.terminal-prompt{
color:#28c840}.terminal-line-output{
color:#8a8a8a}.terminal-line-skill{
color:#6fd48f;
font-weight:600}.terminal-window-secondary{
z-index:3;
width:min(480px,58vw);
height:min(295px,32vh);
box-shadow:0 24px 48px rgba(0,0,0,0.5),0 6px 14px rgba(0,0,0,0.45),0 0 0 1px rgba(255,255,255,0.07)}.terminal-window-secondary .terminal-body{
padding:10px 12px;
font-size:clamp(9px,1vw,12px);
line-height:1.55}.terminal-cursor{
display:inline-block;
width:0.5em;
height:1em;
margin-left:1px;
background:#f2f2f2;
vertical-align:text-bottom;
animation:terminal-blink 0.9s steps(1) infinite}@keyframes terminal-blink{
50%{
opacity:0}}.ai-section-wrap{
position:relative;
height:540vh}.ai-sticky{
position:relative;
width:100%;
height:100lvh;
overflow:hidden;
background:transparent}.ai-sticky::before{
content:"";
position:absolute;
inset:0;
background:#050505;
z-index:-1}.point-cloud-canvas{
position:absolute;
inset:0;
width:100%;
height:100%;
z-index:0;
display:block}.ai-heading{
position:absolute;
top:max(24px,3vw);
left:max(24px,3vw);
z-index:3;
font-weight:700;
font-size:clamp(40px,7vw,96px);
line-height:1;
letter-spacing:-0.02em;
color:#ffffff;
opacity:0;
filter:blur(26px);
will-change:opacity,filter}.ai-content{
position:absolute;
inset:0;
z-index:2;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:clamp(18px,2.4vh,28px);
padding:clamp(120px,15vh,160px) clamp(20px,4vw,56px) clamp(28px,4vh,48px);
opacity:0;
transform:translateY(24px) scale(0.97)}@media (max-width:640px){
.ai-content{
gap:clamp(10px,1.6vh,16px);
padding:clamp(64px,9vh,88px) clamp(16px,4vw,28px) clamp(8px,1.6vh,16px)}}.ai-top-row{
display:flex;
align-items:stretch;
justify-content:center;
gap:clamp(16px,2.4vw,40px);
width:100%;
max-width:1440px;
flex-wrap:wrap}@media (max-width:640px){
.ai-top-row{
display:none}}.chat-window{
width:min(380px,100%);
flex:1 1 380px;
max-width:520px;
max-height:min(400px,46svh);
background:#131313;
border:1px solid rgba(255,255,255,0.08);
border-radius:16px;
overflow:hidden;
box-shadow:0 30px 80px rgba(0,0,0,0.5);
display:flex;
flex-direction:column}@media (max-width:640px){
.chat-window{
max-height:min(260px,30svh)}}.chat-titlebar{
display:flex;
align-items:center;
gap:8px;
padding:12px 16px;
border-bottom:1px solid rgba(255,255,255,0.08);
flex:none}.chat-dot{
width:8px;
height:8px;
border-radius:50%;
background:#3ddc70;
box-shadow:0 0 8px rgba(61,220,112,0.8)}.chat-title{
font-size:11px;
letter-spacing:0.08em;
text-transform:uppercase;
color:rgba(255,255,255,0.5)}.chat-body{
padding:16px 18px 20px;
display:flex;
flex-direction:column;
gap:10px;
overflow-y:auto;
min-height:0}.chat-bubble{
max-width:88%;
padding:9px 13px;
border-radius:13px;
font-size:13.5px;
line-height:1.4;
opacity:0;
transform:translateY(8px);
transition:opacity 0.35s ease,transform 0.35s ease}.chat-bubble.user{
align-self:flex-end;
background:#ffffff;
color:#0a0a0a;
border-bottom-right-radius:4px}.chat-bubble.assistant{
align-self:flex-start;
background:#1f1f1f;
color:#f2f2f2;
border-bottom-left-radius:4px}.chat-bubble.visible{
opacity:1;
transform:translateY(0)}.typing-dots{
display:inline-flex;
gap:4px;
padding:4px 2px}.typing-dots span{
width:6px;
height:6px;
border-radius:50%;
background:rgba(255,255,255,0.5);
animation:typing-bounce 1.1s ease-in-out infinite}.typing-dots span:nth-child(2){
animation-delay:0.15s}.typing-dots span:nth-child(3){
animation-delay:0.3s}@keyframes typing-bounce{
0%,60%,100%{
transform:translateY(0);
opacity:0.5}30%{
transform:translateY(-4px);
opacity:1}}.network-panel{
flex:1 1 380px;
max-width:620px;
display:flex;
align-items:center;
justify-content:center;
background:#ffffff;
border-radius:16px;
padding:8px;
box-shadow:0 30px 80px rgba(0,0,0,0.5)}.network-svg{
width:100%;
height:auto;
max-height:min(440px,50svh);
overflow:visible}@media (max-width:640px){
.network-svg{
max-height:min(220px,26svh)}}.network-svg text{
font-family:'PP Neue Montreal',Arial,sans-serif;
fill:rgba(10,10,10,0.7);
font-size:13px}.network-svg .node-output text{
fill:#ffffff;
font-size:19px;
font-weight:700}.ai-cards-row{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:clamp(10px,1.4vw,20px);
width:100%;
max-width:1440px}@media (max-width:980px){
.ai-cards-row{
grid-template-columns:repeat(3,1fr)}}@media (max-width:640px){
.ai-cards-row{
grid-template-columns:repeat(1,1fr);
gap:8px}}.skill-card{
background:#101010;
border:1px solid rgba(255,255,255,0.09);
border-radius:12px;
padding:clamp(12px,1.4vw,20px);
display:flex;
flex-direction:column;
gap:8px;
opacity:0;
transform:translateY(16px)}.skill-card-title{
font-size:clamp(12.5px,1.1vw,15px);
font-weight:700;
color:#ffffff;
line-height:1.2}.skill-card-blurb{
font-size:clamp(10.5px,0.95vw,13px);
line-height:1.4;
color:rgba(255,255,255,0.55);
flex:1}.skill-card-chips{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:2px}.skill-chip{
font-size:clamp(9.5px,0.85vw,11.5px);
padding:3px 8px;
border-radius:999px;
background:rgba(255,255,255,0.07);
border:1px solid rgba(255,255,255,0.14);
color:rgba(255,255,255,0.8);
white-space:nowrap}.footer-wrap{
position:relative}.footer{
padding:clamp(14px,2.5vh,22px) 0 calc(clamp(14px,2.5vh,22px) + env(safe-area-inset-bottom));
background:#0a0a0a;
display:flex;
align-items:center;
justify-content:center}.footer-tyler-svg{
height:clamp(56px,11vh,108px);
width:auto;
display:block;
color:#ffffff;
overflow:hidden}.footer-tyler-svg path{
cursor:pointer}