body{margin:0;font-family:'Share Tech Mono',monospace;background:#000;color:#00aaff;cursor:none;overflow-x:hidden;}

/* Matrix background */
#matrix{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;opacity:0.05;}

/* Content area */
.content{position:relative;z-index:5;width:900px;margin:50px auto;padding:30px;}

/* Frames */
.frame-section{margin-bottom:50px;padding:15px;border:2px solid #00aaff;border-radius:12px;box-shadow:0 0 20px #00aaff;background:#000b;}
.frame-title{font-size:1.8rem;margin-bottom:10px;border-bottom:1px solid #00aaff;display:inline-block;text-shadow:0 0 10px #00aaff;}
.frame-content{font-size:1rem;line-height:1.5;margin-bottom:10px;}
.frame-cards{display:flex;flex-wrap:wrap;gap:10px;}
.card{flex:1 1 calc(33% - 10px);background:#00111f;border:1px solid #00aaff;border-radius:8px;padding:12px;text-align:center;transition:all 0.3s;cursor:pointer;animation:cardSlide 1s ease;}
.card:hover{transform:scale(1.05);box-shadow:0 0 25px #00aaff,0 0 40px inset;}
@keyframes cardSlide{0%{opacity:0;transform:translateY(20px);}100%{opacity:1;transform:translateY(0);}}

.skill-bar{height:20px;position:relative;overflow:hidden;border-radius:10px;border:1px solid #00aaff;background:#00111f;}
.skill-bar::before{content:attr(data-skill);position:absolute;left:5px;top:2px;font-size:0.9rem;}
.skill-bar div{height:100%;width:0;background:#00aaff;border-radius:10px;animation:fillSkill 2s forwards;}
@keyframes fillSkill{to{width:var(--level);}}

/* Typing */
.typing:after{content:"|";animation:blink 1s infinite;}
@keyframes blink{0%,50%,100%{opacity:1;}25%,75%{opacity:0;}}

/* Custom cursor */
.cursor{position:fixed;width:25px;height:25px;border:2px solid #00aaff;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);box-shadow:0 0 15px #00aaff,0 0 30px #00aaff inset;animation:pulse 1.5s infinite;}
.cursor::before{content:"";position:absolute;width:8px;height:8px;top:50%;left:50%;transform:translate(-50%,-50%);background:#00aaff;border-radius:50%;box-shadow:0 0 10px #00aaff,0 0 20px #00aaff inset;animation:innerPulse 1s infinite alternate;}
@keyframes pulse{0%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,-50%) scale(1.2);}100%{transform:translate(-50%,-50%) scale(1);}}
@keyframes innerPulse{0%{transform:translate(-50%,-50%) scale(0.8);opacity:0.7;}100%{transform:translate(-50%,-50%) scale(1.2);opacity:1;}}

/* Bot & speech bubble */
.bot{position:fixed;bottom:20px;right:20px;width:80px;height:100px;background:#00aaff;border-radius:15px;animation:botBounce 2s infinite;z-index:10;}
.bot-head{width:60px;height:40px;background:#00aaff;border-radius:50%;position:absolute;top:-20px;left:10px;}
.bot-eyes{position:absolute;top:5px;left:50%;transform:translateX(-50%);display:flex;gap:8px;}
.eye{width:8px;height:8px;background:#000;border-radius:50%;animation:blink 5s infinite;}
.bot-mouth{width:20px;height:5px;background:#000;border-radius:50%;position:absolute;bottom:10px;left:50%;transform:translateX(-50%);animation:talk 0.5s infinite alternate;}
@keyframes blink{0%,90%,100%{height:8px;}95%{height:2px;}}
@keyframes talk{0%{height:5px;}100%{height:2px;}}
@keyframes botBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}

/* Speech bubble */
.speech-bubble{position:fixed;bottom:140px;right:20px;background:#000;border:2px solid #00aaff;padding:15px 20px;border-radius:10px;color:#00aaff;max-width:250px;animation:fadeIn 1s;}
.speech-bubble::after{content:'';position:absolute;bottom:-10px;left:20px;border-width:10px;border-style:solid;border-color:#000 transparent transparent transparent;}
@keyframes fadeIn{0%{opacity:0;transform:translateY(20px);}100%{opacity:1;transform:translateY(0);}}