:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#555555;
  --line:#d9d9d9;
  --max:980px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: "Hiragino Sans", "Noto Sans JP", "Segoe UI", sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.7;
}

a{ color:inherit; text-decoration:none; }
.container{ max-width:var(--max); margin:0 auto; padding:0 20px; }

header{
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
}

.logo{
  width:60px;
  height:60px;
  background:#fff;
  padding:4px;
  object-fit:contain;
}

.brand-name{ font-size:14px; line-height:1.1; }
.brand-subtitle{ font-size:12px; color:var(--muted); line-height:1.1; }

.navlinks{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:13px;
}

.navlinks a{
  padding:8px 10px;
  border:1px solid transparent;
}

.navlinks a:hover{
  color:var(--text);
  border-color:var(--line);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid var(--text);
  background:#fff;
  color:var(--text);
  font-size:14px;
  cursor:pointer;
  white-space:nowrap;
}

.btn:hover{ background:#f5f5f5; }
.icon-btn{
  width:44px;
  height:44px;
  padding:0;
  border:1px solid #c7c7cc;
  background:#d1d1d6;
  border-radius:12px;
  transition:background .15s ease, border-color .15s ease;
}
.icon-btn:hover{
  border-color:#bcbcc3;
  background:#c6c6cd;
}
.btn-icon{
  display:block;
  width:22px;
  height:22px;
  object-fit:contain;
}

.btn.primary{
  background:#111;
  color:#fff;
  font-weight:700;
}

main{ padding:26px 0 60px; }

.section{
  margin-top:18px;
}

.section .inner{ padding:22px 0; }
#skills .inner,
#works .inner,
#contact .inner{ padding:42px 0; }

.divider{
  display:none;
}

.divider.spaced{ margin:14px 0; }

.title{
  display:block;
  margin:0 0 12px;
  text-align:center;
}

.title h2{ margin:0; font-size:24px; }
.kicker{
  color:var(--muted);
  font-size:12px;
}
.subsection + .subsection{
  margin-top:40px;
  padding-top:28px;
  border-top:1px solid #ececec;
}
.subsection-title{
  margin:0 0 12px;
  font-size:20px;
  text-align:center;
}
.subsection-kicker{
  margin:0 0 12px;
  text-align:center;
}

.profile{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.profile-top{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:16px;
  align-items:start;
}

.avatar{
  width:120px;
  aspect-ratio:1/1;
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-weight:700;
}
.avatar-icon{
  width:72px;
  height:72px;
  object-fit:contain;
}

.firstview{
  min-height:78vh;
  margin-top:0;
}

.firstview .inner{
  min-height:78vh;
  display:flex;
  align-items:center;
}

.firstview .profile-top{
  grid-template-columns:minmax(240px, 34vw) minmax(0, 1fr);
  gap:40px;
  align-items:center;
  width:100%;
}

.firstview .avatar{
  width:min(34vw, 420px);
  height:min(34vw, 420px);
  max-width:100%;
  overflow:hidden;
}

.firstview .avatar-icon{
  width:100%;
  height:100%;
  object-fit:cover;
}

.firstview .name{
  font-size:clamp(30px, 4vw, 44px);
  line-height:1.1;
}

.firstview .role{
  margin-top:10px;
  font-size:16px;
}

.firstview .bullets{
  margin-top:14px;
  font-size:14px;
}

.firstview .links{
  margin-top:18px;
}

.name{ margin:0; font-size:22px; font-weight:700; }
.role{ margin:6px 0 0; color:var(--muted); font-size:13px; }
.bullets{ margin:10px 0 0; padding-left:18px; color:var(--muted); font-size:13px; }

.pill{
  font-size:12px;
  color:var(--text);
  border:1px solid var(--line);
  padding:4px 8px;
}

.links{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }

#skills,
#contact{
  position:relative;
  background:transparent;
}
#skills::before,
#contact::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:#fafafa;
  z-index:-1;
}

#skills .title,
#contact .title{
  margin-bottom:24px;
}

.contact-shell{
  background:#fff;
  border:1px solid #e3e3e3;
  border-radius:16px;
  padding:24px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.contact-logo{
  width:96px;
  height:96px;
  object-fit:contain;
}

.contact-name{
  margin:0;
  font-size:16px;
  font-weight:700;
  letter-spacing:.01em;
}

.contact-copy{
  margin:0;
  color:var(--muted);
  font-size:14px;
  text-align:center;
}

.contact-links{
  justify-content:center;
  margin-top:0;
}

.skills-shell{
  display:grid;
  grid-template-columns:minmax(0, .62fr) minmax(0, 1.38fr);
  gap:20px;
  align-items:stretch;
}

.skills-shell .skill-panel:nth-child(1){
  grid-column:1;
  grid-row:1;
}

.skills-shell .skill-panel:nth-child(2){
  grid-column:1;
  grid-row:2;
}

.skills-shell .skill-panel:nth-child(3){
  grid-column:2;
  grid-row:1 / span 2;
  height:100%;
}

.skill-panel{
  background:#fff;
  border:1px solid #e3e3e3;
  border-radius:16px;
  padding:20px;
}

.skill-title{
  margin:0 0 12px;
  font-size:16px;
  letter-spacing:.02em;
}

.skill-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.skill-tag{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #d7d7d7;
  background:#f5f5f5;
  font-size:12px;
  line-height:1.2;
}
.tag-swift{
  background:linear-gradient(135deg, rgba(250,117,39,.14), rgba(255,255,255,.92));
  border-color:rgba(250,117,39,.35);
}
.tag-html{
  background:linear-gradient(135deg, rgba(227,79,38,.14), rgba(255,255,255,.92));
  border-color:rgba(227,79,38,.35);
}
.tag-css{
  background:linear-gradient(135deg, rgba(38,77,228,.14), rgba(255,255,255,.92));
  border-color:rgba(38,77,228,.35);
}
.tag-js{
  background:linear-gradient(135deg, rgba(247,223,30,.18), rgba(255,255,255,.92));
  border-color:rgba(190,170,0,.35);
}
.tag-c{
  background:linear-gradient(135deg, rgba(0,89,156,.12), rgba(255,255,255,.92));
  border-color:rgba(0,89,156,.32);
}
.tag-ruby{
  background:linear-gradient(135deg, rgba(204,52,45,.14), rgba(255,255,255,.92));
  border-color:rgba(204,52,45,.34);
}
.tag-firebase{
  background:linear-gradient(135deg, rgba(255,193,7,.18), rgba(255,255,255,.92));
  border-color:rgba(230,163,0,.34);
}
.tag-coreml{
  background:linear-gradient(135deg, rgba(90,200,250,.15), rgba(255,255,255,.92));
  border-color:rgba(75,170,220,.34);
}
.tag-figma{
  background:linear-gradient(135deg, rgba(162,89,255,.14), rgba(255,255,255,.92));
  border-color:rgba(162,89,255,.34);
}
.tag-canva{
  background:linear-gradient(135deg, rgba(0,196,204,.15), rgba(255,255,255,.92));
  border-color:rgba(0,166,173,.34);
}
.tag-ae{
  background:linear-gradient(135deg, rgba(153,102,255,.14), rgba(255,255,255,.92));
  border-color:rgba(153,102,255,.34);
}
.tag-pr{
  background:linear-gradient(135deg, rgba(153,0,255,.12), rgba(255,255,255,.92));
  border-color:rgba(153,0,255,.32);
}
.tag-ai{
  background:linear-gradient(135deg, rgba(255,154,0,.14), rgba(255,255,255,.92));
  border-color:rgba(255,154,0,.34);
}

.strength-list{
  margin:0;
  padding-left:20px;
  color:var(--muted);
  font-size:14px;
}

.strength-list li{
  margin:8px 0;
}

.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.card{
  border:0;
  padding:0;
}

.card h3{ margin:0 0 10px; font-size:14px; }
.list{ margin:0; padding-left:18px; color:var(--muted); font-size:13px; }
.list li{ margin:6px 0; }

.works-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}

.work{
  border:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:220px;
}

.work .thumb{
  display:block;
  width:100%;
  aspect-ratio:24/13;
  border:1px solid var(--line);
  background:#fff;
  object-fit:cover;
  object-position:center;
}

.work h3{ margin:0; font-size:15px; }
.work p{ margin:0; color:var(--muted); font-size:13px; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }

.chip{
  font-size:12px;
  color:var(--text);
  border:1px solid var(--line);
  padding:4px 8px;
}

.work .links{
  margin-top:auto;
  padding-top:8px;
}
.personal-dev .work .links,
.client-work .work .links{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
.personal-dev .work .links .btn,
.client-work .work .links .btn{
  width:100%;
  height:40px;
  border-radius:999px;
}
.personal-dev .work .links .appstore-btn{
  border:0;
  color:#fff;
  background:linear-gradient(135deg, #2a67ff 0%, #4b9fff 55%, #66c6ff 100%);
}
.personal-dev .work .links .appstore-btn:hover{
  background:linear-gradient(135deg, #255be0 0%, #448de4 55%, #5eb1df 100%);
}
.personal-dev .work .links .testflight-btn{
  border:0;
  color:#fff;
  background:linear-gradient(135deg, #0971ff 0%, #2a9dff 55%, #6fc4ff 100%);
}
.personal-dev .work .links .testflight-btn:hover{
  background:linear-gradient(135deg, #0861db 0%, #268adf 55%, #5ea9db 100%);
}
.note-btn{
  border:0;
  color:#fff;
  background:#111;
  border-radius:999px;
  font-weight:600;
  gap:8px;
  padding:0 12px;
}
.note-btn:hover{
  background:#2a2a2a;
}
.store-icon{
  width:18px;
  height:18px;
  object-fit:contain;
}
.note-icon{
  width:auto;
  height:30%;
  max-height:38px;
}
.lp-btn{
  border:1px solid #cfd3dc;
  background:#f3f5f8;
  color:#1b1f23;
  border-radius:999px;
  font-weight:600;
  letter-spacing:.01em;
}
.lp-btn:hover{
  background:#e9edf3;
  border-color:#bcc3cf;
}
.pending-text{
  font-size:11px;
}
.pending-btn{
  opacity:.72;
  cursor:not-allowed;
}
.pending-btn:hover{
  filter:none;
}

.case{
  border:0;
  background:transparent;
  position:static;
  overflow:visible;
}

.case:after{ content:none; }

.case-title{ margin:0 0 8px; }

.case-text{
  margin:0;
  color:var(--muted);
  font-size:13px;
  position:relative;
}

.text-strong{ color:var(--text); }
.text-emphasis{ color:var(--text); font-weight:700; }

.case .result{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:12px;
  position:relative;
}

.badge{
  padding:10px 12px;
  border:1px solid var(--line);
  min-width:220px;
}

.badge .lbl{ font-size:12px; color:var(--muted); margin:0 0 6px; }
.badge .val{ margin:0; font-size:13px; font-weight:700; }
.links.case-links{ position:relative; }

.small-muted-text{ margin:0; color:var(--muted); font-size:13px; }
.spacer{ height:14px; }

footer{
  margin-top:18px;
  color:var(--muted);
  font-size:12px;
  text-align:center;
  padding:14px 0;
}

@media (max-width:900px){
  .profile-top{ grid-template-columns:90px 1fr; }
  .avatar{ width:90px; }
  .two-col{ grid-template-columns:1fr; }
  .skills-shell{ grid-template-columns:1fr; }
  .skills-shell .skill-panel:nth-child(1),
  .skills-shell .skill-panel:nth-child(2),
  .skills-shell .skill-panel:nth-child(3){
    grid-column:auto;
    grid-row:auto;
  }
  .works-grid{ grid-template-columns:1fr; }
  .navlinks{ display:none; }
  .firstview{
    min-height:auto;
    margin-top:0;
  }
  .firstview .inner{
    min-height:auto;
    align-items:flex-start;
  }
  .firstview .profile-top{
    grid-template-columns:1fr;
    gap:20px;
  }
  .firstview .avatar{
    width:min(70vw, 320px);
    height:min(70vw, 320px);
  }
}