@import"https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css";*{box-sizing:border-box;margin:0;padding:0;font-family:Noto Sans JP,sans-serif;font-optical-sizing:auto;scroll-behavior:smooth}.wrap{font-family:var(--font-sans, system-ui, sans-serif);background:#0a0a0a;color:#fff;min-height:100vh}nav{position:sticky;top:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:1.2rem 3rem;background:#0a0a0ae6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:.5px solid rgba(255,255,255,.07)}.nav-logo{font-size:18px;font-weight:500;letter-spacing:2px;color:#fff}.nav-logo span{color:#7c3aed}.nav-links{display:flex;gap:2rem;align-items:center}.nav-links a{font-size:12px;color:#ffffff73;text-decoration:none;letter-spacing:1px;text-transform:uppercase}.nav-links a:hover{color:#fff}.lang-sw{display:flex;gap:4px}.lang-sw button{background:transparent;border:.5px solid rgba(255,255,255,.12);color:#fff6;font-size:11px;padding:4px 9px;border-radius:4px;cursor:pointer;letter-spacing:1px;transition:all .15s}.lang-sw button:hover,.lang-sw button.active{border-color:#7c3aed;color:#fff;background:#7c3aed1f}.hero{padding:9rem 3rem 5rem;max-width:1300px;margin:0 auto}.hero-tag{display:inline-block;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#7c3aed;margin-bottom:1.5rem;border:.5px solid rgba(124,58,237,.35);padding:4px 12px;border-radius:20px}.hero h1{font-size:clamp(52px,8vw,96px);font-weight:500;line-height:1;letter-spacing:-2px;margin-bottom:2rem}.hero h1 em{font-style:normal;color:#ffffff2e}.hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}.hero p{max-width:400px;font-size:14px;color:#ffffff73;line-height:1.8}.hero-actions{display:flex;gap:10px;align-items:center;flex-shrink:0}.btn-primary{padding:11px 24px;background:#7c3aed;color:#fff;border:none;border-radius:6px;font-size:12px;font-weight:500;letter-spacing:1px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px}.btn-ghost{padding:10px 24px;background:transparent;color:#ffffff8c;border:.5px solid rgba(255,255,255,.18);border-radius:6px;font-size:12px;letter-spacing:1px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none}.btn-ghost:hover{border-color:#fff6;color:#fff}.divider{width:100%;height:.5px;background:#ffffff0f}.section{max-width:1300px;margin:0 auto;padding:4.5rem 3rem}.section-label{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#ffffff40;margin-bottom:2.5rem;display:flex;align-items:center;gap:12px}.section-label:after{content:"";flex:1;height:.5px;background:#ffffff0f}.resume-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}.resume-card{background:#111;border:.5px solid rgba(255,255,255,.08);border-radius:12px;padding:1.5rem;display:flex;flex-direction:column;gap:1rem;transition:border-color .2s,background .2s}.resume-card:hover{background:#161616;border-color:#7c3aed59}.resume-lang-badge{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#ffffff59}.badge-study{background:#3b82f61f;color:#3b82f6;border:.5px solid rgba(59,130,246,.25)}.resume-flag{width:22px;height:14px;border-radius:2px;object-fit:cover;display:inline-block;font-size:18px;line-height:1}.resume-card h3{font-size:16px;font-weight:500;color:#fff}.resume-card p{font-size:12px;color:#ffffff4d;line-height:1.6}.resume-download{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;background:#7c3aed1f;border:.5px solid rgba(124,58,237,.3);border-radius:6px;color:#a78bfa;font-size:12px;letter-spacing:1px;cursor:pointer;text-decoration:none;transition:background .15s;margin-top:auto;align-self:flex-start}.resume-download:hover{background:#7c3aed38}.projects-list{display:flex;flex-direction:column;gap:1px;background:#ffffff0d;border-radius:12px;overflow:hidden}.project-row{display:grid;grid-template-columns:44px 1fr auto;align-items:start;gap:1.25rem;padding:0;background:#0a0a0a;cursor:pointer;border-bottom:.5px solid rgba(255,255,255,.05);transition:background .15s}.project-row:last-child{border-bottom:none}.project-row:hover{background:#0f0f0f}.project-num-col{padding:1.6rem 0 1.5rem 1.75rem;font-size:12px;color:#ffffff2e;font-weight:500;font-variant-numeric:tabular-nums}.project-main{padding:1.5rem 0}.project-header{display:flex;align-items:center;gap:12px;margin-bottom:6px}.project-header h3{font-size:17px;font-weight:500;color:#fff}.project-desc{font-size:13px;color:#ffffff59;margin-bottom:12px}.project-stack{font-size:11px;color:#fff3;letter-spacing:.3px}.project-badge{font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:3px 9px;border-radius:20px;white-space:nowrap}.badge-development{background:#f59e0b1f;color:#f59e0b;border:.5px solid rgba(245,158,11,.25)}.badge-live{background:#1d9e751f;color:#1d9e75;border:.5px solid rgba(29,158,117,.25)}.badge-archived{background:#ffffff0a;color:#ffffff40;border:.5px solid rgba(255,255,255,.08)}.carousel-col{padding:1.25rem 1.75rem 1.25rem 0;width:500px;flex-shrink:0}.carousel-wrap{position:relative;width:100%;height:250px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#111;box-shadow:0 8px 30px #00000059}.carousel-slides{display:flex;width:100%;height:100%;transition:transform .35s ease}.carousel-slide{min-width:100%;width:100%;height:100%;flex-shrink:0}.carousel-slide img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.carousel-nav{position:absolute;bottom:6px;left:0;right:0;display:flex;justify-content:center;gap:4px;z-index:2}.carousel-dot{width:4px;height:4px;border-radius:50%;background:#ffffff40;border:none;padding:0;cursor:pointer;transition:background .2s,transform .2s}.carousel-dot.active{background:#fff;transform:scale(1.2)}.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:#00000080;border:.5px solid rgba(255,255,255,.12);color:#fff;font-size:30px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;opacity:0;transition:opacity .15s}.carousel-wrap:hover .carousel-btn{opacity:1}.carousel-btn.prev{left:5px}.carousel-btn.next{right:5px}.tech-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:#ffffff0d;border-radius:12px;overflow:hidden}.tech-item{background:#0a0a0a;padding:1.75rem 1rem;display:flex;flex-direction:column;align-items:center;gap:10px;transition:background .15s}.tech-item:hover{background:#111}.tech-item i{font-size:34px;color:#ffffff80;transition:color .15s}.tech-item:hover i{color:#a78bfa}.tech-item span{font-size:10px;color:#ffffff40;letter-spacing:1px;text-transform:uppercase}footer{border-top:.5px solid rgba(255,255,255,.06);padding:1.5rem 3rem;display:flex;justify-content:space-between;align-items:center}footer p{font-size:11px;color:#ffffff2e;letter-spacing:1px}.footer-dot{width:5px;height:5px;border-radius:50%;background:#7c3aed;display:inline-block;margin-right:8px}@media (max-width: 768px){.project-row{grid-template-columns:1fr;gap:1rem}.project-num-col{padding:1rem 1.5rem 0}.carousel-col{padding:0 1.5rem 1.5rem;width:100%}.carousel-wrap{width:100%;height:180px}.carousel-slide{min-width:100%;height:180px}.tech-grid{grid-template-columns:repeat(3,1fr)}.hero h1{font-size:clamp(42px,10vw,64px)}nav{padding:1rem 1.5rem}.hero,.section,footer{padding-left:1.5rem;padding-right:1.5rem}}.hamburger{display:none;flex-direction:column;gap:4px;background:transparent;border:none;cursor:pointer;z-index:101}.hamburger span{width:22px;height:2px;background:#fff;border-radius:2px;transition:.25s ease}@media (max-width: 768px){.hamburger{display:flex}.nav-links{position:absolute;top:100%;right:0;width:100%;background:#0a0a0afa;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);flex-direction:column;align-items:flex-start;padding:1.5rem;gap:1rem;border-bottom:.5px solid rgba(255,255,255,.06);opacity:0;pointer-events:none;transform:translateY(-10px);transition:.25s ease}.nav-links.mobile-open{opacity:1;pointer-events:all;transform:translateY(0)}}.hamburger.open span:nth-child(1){transform:rotate(45deg) translateY(8px)}.hamburger.open span:nth-child(2){opacity:0}.hamburger.open span:nth-child(3){transform:rotate(-45deg) translateY(-8px)}
