body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body,html{width:100%;height:100vh;overflow-x:hidden;background-color:#000;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.app{display:flex;flex-direction:column;min-height:100vh}.main-content{flex:1;position:relative;z-index:10;margin-top:60px}.page{max-width:1200px;margin:0 auto;padding:40px 20px;color:#fff;min-height:calc(100vh - 120px)}.page-header{text-align:center;margin-bottom:60px}.page-header h1{font-size:3rem;margin-bottom:20px;color:#00dcff}.page-header p{font-size:1.2rem;color:#ccc;max-width:600px;margin:0 auto}.page-content{display:flex;align-items:center;justify-content:center;height:calc(100vh - 120px)}.page-content h1{font-size:4rem;color:#00dcff;text-align:center}.footer{position:relative;z-index:1000;background-color:#000000e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.1);padding:15px 20px;text-align:center}.footer p{color:#888;font-size:14px;margin:0}.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background-color:#000000e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1)}.nav-container{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center;height:60px;position:relative}.nav-logo{display:flex;align-items:center}.nav-logo a{font-size:20px;font-weight:700;color:#00dcff;text-decoration:none;letter-spacing:.06em;transition:color .2s}.nav-logo a:hover{color:#fff;text-shadow:0 0 12px #00dcff99}.nav-menu{display:flex;list-style:none;gap:30px}.nav-menu-chat{gap:0}.nav-item{display:flex}.nav-link{color:#fff;font-size:16px;padding:8px 16px;border-radius:6px;transition:all .3s ease;text-decoration:none;-webkit-tap-highlight-color:transparent}.nav-link:hover,.nav-link.active{color:#00dcff;background-color:#00dcff1a}.nav-chat-link-outer{display:flex;align-items:center;margin-left:auto;padding-left:0;padding-right:0;height:100%}@media (max-width: 768px){.nav-container{padding:0 8px;height:55px}.nav-logo a{font-size:18px}.nav-menu{gap:20px}.nav-menu-chat{gap:0}.nav-link{padding:8px 10px;font-size:15px}.nav-chat-link-outer{margin-left:auto;padding-right:0}}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px}.project-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:30px;transition:all .3s ease}.project-card:hover{background:#ffffff14;border-color:#00dcff4d;transform:translateY(-5px)}.project-card h3{color:#00dcff;margin-bottom:15px;font-size:1.3rem}.project-card p{color:#ccc;margin-bottom:20px;line-height:1.6}.project-tags{display:flex;flex-wrap:wrap;gap:8px}.tag{background:#00dcff33;color:#00dcff;padding:4px 8px;border-radius:4px;font-size:.8rem}.blog-posts{max-width:800px;margin:0 auto}.blog-post{background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:30px;margin-bottom:30px;transition:all .3s ease}.blog-post:hover{background:#ffffff0d;border-color:#00dcff33}.blog-post h3{color:#00dcff;margin-bottom:10px;font-size:1.4rem}.post-date{color:#888;font-size:.9rem;margin-bottom:15px}.blog-post p{color:#ccc;line-height:1.6;margin-bottom:15px}.read-more{color:#00dcff;text-decoration:none;font-weight:500;transition:color .3s ease}.read-more:hover{color:#fff}.about-content{max-width:800px;margin:0 auto}.about-section{margin-bottom:40px}.about-section h3{color:#00dcff;margin-bottom:20px;font-size:1.5rem}.about-section p{color:#ccc;line-height:1.7;margin-bottom:15px}.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;margin-top:20px}.skill-category h4{color:#fff;margin-bottom:15px}.skill-category ul{list-style:none}.skill-category li{color:#ccc;border-left:2px solid rgba(0,220,255,.3);padding:5px 0 5px 15px;margin-bottom:8px}.canvas{width:100%;height:100vh;position:fixed;top:0;left:0;touch-action:none;z-index:100}.home-center-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100vw;height:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:20}.hoverable-yuki{font-size:8vw;font-family:Arial,sans-serif;color:transparent;-webkit-text-stroke:2px #00dcff;text-stroke:2px #00dcff;text-align:center;pointer-events:auto;cursor:pointer;-webkit-user-select:none;user-select:none;transition:filter .2s,-webkit-text-stroke-color .2s}.hoverable-yuki:hover{filter:drop-shadow(0 0 16px #00dcff);-webkit-text-stroke-color:#fff;text-stroke-color:#fff}.chat-widget{position:fixed;top:70px;right:32px;z-index:2000;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.chat-widget-modal{position:fixed;top:70px;right:32px;z-index:2000}.chat-widget-mobile{position:fixed;top:5vw;left:50%;transform:translate(-50%);width:90vw;height:50vh;max-width:500px;background:#000000f7;z-index:2002;border-radius:20px 20px 16px 16px;box-shadow:0 4px 40px 2px #00dcff18,0 2px 24px #000;display:flex;flex-direction:column;animation:chat-fade-in .18s cubic-bezier(.33,.97,.54,1);overscroll-behavior:none}@keyframes chat-fade-in{0%{opacity:0}to{opacity:1}}.chat-container{width:100%;height:100%;border-radius:inherit;background:#000000f7;display:flex;flex-direction:column;overflow:hidden}.chat-header{flex-shrink:0;padding:13px 16px;background:#00dcff12;border-bottom:1px solid rgba(255,255,255,.08);min-height:50px;display:flex;justify-content:space-between;align-items:center}.chat-header h3{color:#00dcff;margin:0 auto;font-size:16px;font-weight:600;letter-spacing:.02em;text-align:center}.chat-close-btn,.chat-back-btn{background:none;border:none;color:#00dcff;font-size:24px;cursor:pointer;padding:0 4px;height:38px;width:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .16s;margin-left:0;margin-right:0}.chat-close-btn:hover,.chat-back-btn:hover{background:#00dcff24;color:#fff}.chat-messages{flex:1 1 0%;min-height:0;min-width:0;overflow-y:auto;padding:14px 10px;display:flex;flex-direction:column;gap:12px;background:transparent}.chat-welcome{text-align:center;color:#ccc;padding:10px 0}.chat-message{display:flex;flex-direction:column;max-width:85%}.chat-message.user{align-self:flex-end;align-items:flex-end}.chat-message.ai{align-self:flex-start;align-items:flex-start}.message-content{padding:10px 14px;border-radius:18px;line-height:1.4;word-wrap:break-word}.chat-message.user .message-content{background:linear-gradient(135deg,#00dcff,#09c);color:#fff}.chat-message.ai .message-content{background:#ffffff1a;color:#fff}.message-time{font-size:11px;color:#888;margin-top:4px;padding:0 4px}.typing{display:flex;align-items:center;gap:4px}.typing span{width:6px;height:6px;background-color:#00dcff;border-radius:50%;animation:typing 1.4s infinite ease-in-out}.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}@keyframes typing{0%,60%,to{transform:scale(1);opacity:.5}30%{transform:scale(1.2);opacity:1}}.chat-input-container{flex-shrink:0;padding:10px;border-top:1px solid rgba(255,255,255,.08);background:#000000fc;display:flex;gap:8px}.chat-input{flex:1;background:#ffffff21;border:1px solid rgba(255,255,255,.2);border-radius:13px;padding:10px 14px;color:#fff;font-size:16px;outline:none;min-height:38px;transition:border-color .2s,background .2s;resize:none}.chat-input:focus{border-color:#00dcff;background:#00dcff0f}.chat-input::placeholder{color:#888;font-size:15px}.chat-send-btn{background:linear-gradient(135deg,#00dcff,#09c);border:none;border-radius:13px;padding:10px 18px;color:#fff;font-size:15px;font-weight:500;cursor:pointer;transition:all .2s;min-width:64px;min-height:38px}.chat-send-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #00dcff4d}.chat-send-btn:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 900px){.chat-widget-mobile{max-width:98vw;width:96vw;left:50%;top:2vw;transform:translate(-50%)}}@media (max-width: 768px){.nav-container{padding:0 15px;height:55px}.nav-logo a{font-size:18px}.nav-menu{gap:20px}.nav-link{font-size:15px;padding:8px 12px}.page{padding:20px 15px}.page-header h1{font-size:2.5rem}.page-content h1{font-size:3rem}.projects-grid{grid-template-columns:1fr;gap:20px}.project-card,.blog-post{padding:20px}.hoverable-yuki{font-size:16vw;-webkit-text-stroke:1.5px #00dcff;text-stroke:1.5px #00dcff}.chat-widget{bottom:10px;right:10px}.chat-container{width:calc(100vw - 20px);max-width:345px;right:-10px;height:420px;bottom:60px;border-radius:16px}.chat-toggle-btn{width:42px;height:42px;font-size:20px;border-radius:10px}}@media (max-width: 480px){.page-header h1{font-size:2rem}.page-content h1{font-size:2.5rem}.skills-grid{grid-template-columns:1fr}}