:root{--apple-blue: #007AFF;--apple-gray-1: #1d1d1f;--apple-gray-2: #2c2c2e;--apple-gray-6: #f5f5f7;--apple-text: #1d1d1f;--apple-text-secondary: #86868b;--safari-bg: #f6f6f6;--safari-toolbar: #ececec;--safari-tab: #d4d4d4;--safari-tab-active: #ffffff;--safari-border: #c6c6c6;--gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--font-system: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-system);background:#000;color:var(--apple-text);overflow-x:hidden;-webkit-font-smoothing:antialiased}#browser-window{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;max-width:1400px;background:var(--safari-bg);border-radius:12px;overflow:hidden;box-shadow:0 25px 100px #00000080;display:flex;flex-direction:column}.browser-header{background:var(--safari-toolbar);border-bottom:1px solid var(--safari-border);display:flex;align-items:center;padding:8px 8px 0;flex-shrink:0}.tab-bar{display:flex;flex:1;gap:2px;overflow-x:auto}.tab{background:var(--safari-tab);border-radius:8px 8px 0 0;padding:6px 16px;min-width:180px;max-width:240px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative}.tab.active{background:var(--safari-tab-active);box-shadow:0 -2px 8px #00000014}.tab-icon{font-size:14px;flex-shrink:0}.tab-title{font-size:13px;color:var(--apple-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.tab-close{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--apple-text-secondary);opacity:0;transition:opacity .2s ease;flex-shrink:0}.tab:hover .tab-close{opacity:1}.browser-toolbar{background:var(--safari-toolbar);border-bottom:1px solid var(--safari-border);padding:8px 12px;display:flex;align-items:center;gap:12px;flex-shrink:0}.toolbar-left{display:flex;gap:8px}.toolbar-btn{width:32px;height:24px;background:var(--safari-tab-active);border:.5px solid var(--safari-border);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--apple-text);cursor:pointer;transition:all .2s ease}.toolbar-btn:hover{background:#f0f0f0}.address-bar{flex:1;background:var(--safari-tab-active);border:.5px solid var(--safari-border);border-radius:8px;padding:6px 12px;display:flex;align-items:center;gap:8px;font-size:13px}.lock-icon{font-size:12px}.url{color:var(--apple-text)}.browser-content{flex:1;position:relative;overflow:hidden;background:#fff}.content-section{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .5s cubic-bezier(.4,0,.2,1);overflow-y:auto}.content-section.active{opacity:1;pointer-events:all}.scroll-progress{position:fixed;bottom:20px;right:20px;width:50px;height:50px;border-radius:50%;background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#fff;z-index:1000}.page-container{max-width:1000px;margin:0 auto;padding:60px 40px}.page-container .next-btn{display:inline-flex;margin:40px 0 0}.page-title{font-size:clamp(36px,4vw,56px);font-weight:700;color:var(--apple-text);margin-bottom:48px;letter-spacing:-.02em}.start-page{position:relative;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.safari-background{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#f5f7fa,#c3cfe2)}.gradient-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.6;animation:float 20s ease-in-out infinite}.orb-1{width:400px;height:400px;background:linear-gradient(135deg,#667eea,#764ba2);top:-100px;left:-100px;animation-delay:0s}.orb-2{width:350px;height:350px;background:linear-gradient(135deg,#f093fb,#f5576c);bottom:-80px;right:-80px;animation-delay:-7s}.orb-3{width:300px;height:300px;background:linear-gradient(135deg,#4facfe,#00f2fe);top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-14s}@keyframes float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-30px) scale(1.1)}66%{transform:translate(-20px,20px) scale(.9)}}.favorites{position:relative;z-index:1;text-align:center;padding:40px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#fff3;border-radius:24px;border:1px solid rgba(255,255,255,.3)}.hero-title{font-size:clamp(32px,5vw,72px);font-weight:700;color:var(--apple-text);margin-bottom:16px;letter-spacing:-.02em}.gradient-text{background:var(--gradient-1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:clamp(18px,2.5vw,28px);color:var(--apple-text-secondary);font-weight:400;margin-bottom:40px}.timeline{position:relative;padding-left:40px;margin-bottom:20px}.timeline:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--apple-blue),transparent)}.timeline-item{position:relative;margin-bottom:48px;padding-left:32px}.timeline-item:before{content:"";position:absolute;left:-44px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--apple-blue);border:3px solid #ffffff;box-shadow:0 0 0 2px var(--apple-blue)}.timeline-date{font-size:14px;color:var(--apple-blue);font-weight:600;margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em}.timeline-content h3{font-size:24px;font-weight:600;color:var(--apple-text);margin-bottom:4px}.timeline-content h4{font-size:18px;font-weight:500;color:var(--apple-text-secondary);margin-bottom:12px}.timeline-content p{font-size:16px;line-height:1.6;color:var(--apple-text-secondary);margin-bottom:16px}.tech-tags{display:flex;flex-wrap:wrap;gap:8px}.tag{display:inline-block;padding:6px 12px;background:#007aff1a;color:var(--apple-blue);border-radius:16px;font-size:13px;font-weight:500}.contact-content{display:flex;flex-direction:column;align-items:center}.contact-description{font-size:20px;line-height:1.6;color:var(--apple-text-secondary);text-align:center;max-width:600px;margin-bottom:48px}.contact-methods{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;width:100%;max-width:700px;margin:0 auto 48px}.contact-card{display:flex;align-items:center;gap:20px;padding:24px;background:var(--apple-gray-6);border-radius:16px;text-decoration:none;transition:all .3s ease}.contact-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px #0000001a;background:#fff}.contact-icon{font-size:48px;flex-shrink:0}.contact-details h3{font-size:18px;font-weight:600;color:var(--apple-text);margin-bottom:4px}.contact-details p{font-size:14px;color:var(--apple-text-secondary)}.next-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;background:var(--apple-blue);color:#fff;border:none;border-radius:24px;font-size:17px;font-weight:500;font-family:var(--font-system);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #007aff4d}.next-btn:hover{background:#0051d5;transform:translateY(-2px);box-shadow:0 6px 20px #007aff66}.next-btn:active{transform:translateY(0)}.next-arrow{font-size:20px;transition:transform .3s ease}.next-btn:hover .next-arrow{transform:translate(4px)}.contact-form{max-width:600px;margin:0 auto;background:var(--apple-gray-6);padding:40px;border-radius:16px;box-shadow:0 4px 12px #0000000d}.form-title{font-size:24px;font-weight:600;color:var(--apple-text);margin-bottom:32px;text-align:center}.form-group{margin-bottom:24px}.form-group label{display:block;font-size:14px;font-weight:500;color:var(--apple-text);margin-bottom:8px}.form-group input,.form-group textarea{width:100%;padding:14px 16px;border:1px solid #d1d1d6;border-radius:10px;font-size:16px;font-family:var(--font-system);color:var(--apple-text);background:#fff;transition:all .3s ease}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--apple-blue);box-shadow:0 0 0 3px #007aff1a}.form-group textarea{resize:vertical;min-height:120px}.form-group input::placeholder,.form-group textarea::placeholder{color:var(--apple-text-secondary)}.form-submit-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 32px;background:var(--apple-blue);color:#fff;border:none;border-radius:12px;font-size:17px;font-weight:600;font-family:var(--font-system);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #007aff4d}.form-submit-btn:hover{background:#0051d5;transform:translateY(-2px);box-shadow:0 6px 20px #007aff66}.form-submit-btn:active{transform:translateY(0)}.send-icon{font-size:20px;transition:transform .3s ease}.form-submit-btn:hover .send-icon{transform:translate(4px)}@media (max-width: 768px){.contact-form{padding:32px 24px}.contact-methods{grid-template-columns:1fr}}.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px;margin-bottom:20px}.skill-category{background:#fff;border-radius:12px;padding:0;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden;box-shadow:0 4px 20px #0000001a}.skill-category:hover{transform:translateY(-8px);box-shadow:0 12px 40px #00000026}.playlist-header{padding:32px 24px 24px;background:#fff;display:flex;flex-direction:column;align-items:center;gap:16px;position:relative}.playlist-header:before{content:"";position:absolute;top:20px;left:50%;transform:translate(-50%);width:200px;height:200px;background:var(--playlist-gradient);opacity:.15;border-radius:50%;filter:blur(40px);z-index:0}.playlist-cover{width:160px;height:160px;background:var(--playlist-gradient);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:64px;box-shadow:0 8px 32px #0003;position:relative;overflow:hidden;z-index:1}.playlist-cover:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,#fff3,#0003);pointer-events:none}.playlist-title{font-size:22px;font-weight:700;color:var(--apple-text);margin:0;text-align:center;letter-spacing:-.02em;position:relative;z-index:1}.playlist-count{font-size:14px;color:var(--apple-text-secondary);font-weight:500;text-transform:uppercase;letter-spacing:.05em;position:relative;z-index:1}.skill-list{padding:0;background:#f8f8f8}.skill-item{display:flex;align-items:center;padding:12px 20px;cursor:default;transition:all .2s ease;gap:12px;border-top:1px solid rgba(0,0,0,.05)}.skill-item:first-child{border-top:none}.skill-item:hover{background:#00000008}.skill-item:before{content:"♪";color:var(--apple-text-secondary);font-size:14px;flex-shrink:0;width:24px;text-align:center;transition:all .2s ease}.skill-item:hover:before{color:var(--apple-blue);transform:scale(1.2)}.skill-item span{font-size:15px;color:var(--apple-text);font-weight:500;flex:1;display:block;margin:0;transition:color .2s ease}.skill-item:hover span{color:var(--apple-blue)}.skill-bar,.skill-progress{display:none}@media (max-width: 768px){.skills-grid{grid-template-columns:1fr}.playlist-cover{width:100px;height:100px;font-size:40px}}@media (max-width: 768px){#browser-window{width:100vw;height:100vh;border-radius:0}.tab{min-width:120px;max-width:160px;padding:6px 12px}.page-container{padding:40px 20px}.timeline{padding-left:20px}.skills-grid,.contact-methods{grid-template-columns:1fr}.contact-form{padding:32px 24px}}