:root{
  --bg:#fbf8f2;
  --bg-soft:#f1e8db;
  --ink:#241d18;
  --muted:#6f665e;
  --line:rgba(36,29,24,.12);
  --accent:#8b5239;
  --accent-soft:#e8d8cb;
  --paper:#fffdf8;
  --shadow:0 18px 42px rgba(58,38,22,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family:"Hiragino Sans","BIZ UDPGothic","Yu Gothic","Meiryo",sans-serif;
  background:
    radial-gradient(circle at top right, rgba(139,82,57,.08), transparent 28%),
    linear-gradient(180deg, #ffffff, var(--bg));
  line-height:1.75;
}
a{color:inherit;text-decoration:none}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

.site-header{
  position:sticky;
  top:0;
  z-index:10;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px);
}
.header-inner,.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  min-height:74px;
}
.brand-title{
  font-size:22px;
  font-weight:700;
  letter-spacing:.03em;
}
.brand-sub{
  font-size:11px;
  color:var(--muted);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.nav,.footer-links{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}
.nav a,.footer-links a{
  color:var(--muted);
  font-size:14px;
}

.hero{
  display:flex;
  flex-direction:column;
  gap:22px;
  align-items:center;
  padding:56px 24px 36px;
  text-align:center;
}
.hero-lead{
  margin:0;
  font-size:clamp(18px,2.4vw,25px);
  line-height:1.7;
}
.hero-summary{
  margin:18px 0 0;
  color:var(--muted);
  font-size:15px;
}
.hero-action{
  margin:26px 0 0;
  display:flex;
  justify-content:center;
}
.play-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  padding:0;
  background:transparent;
  box-shadow:none;
}
.play-badge{
  display:block;
  width:min(100%,240px);
  height:auto;
}
.hero-visual{
  display:flex;
  justify-content:center;
  width:100%;
}
.hero-logo{
  margin:0;
}
.title-logo{
  display:block;
  width:min(100%,520px);
  height:auto;
  margin:0 auto;
}
.hero-copy{
  max-width:720px;
  margin:0 auto;
  text-align:center;
}

.section{
  padding:32px 24px;
  border-top:1px solid var(--line);
}
.media-stack{
  display:grid;
  gap:34px;
}
.section-head{
  margin-bottom:20px;
}
.section-head h2{
  margin:0;
  font-family:"Hiragino Sans","BIZ UDPGothic","Yu Gothic","Meiryo",sans-serif;
  font-size:clamp(22px,3vw,30px);
  line-height:1.3;
  font-weight:700;
}

.screenshot-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.shot-card{
  padding:0;
}
.shot-image{
  display:block;
  width:100%;
  aspect-ratio:9 / 16;
  object-fit:contain;
  background:transparent;
}
.shot-label{
  margin-top:10px;
  font-size:14px;
  font-weight:600;
  text-align:center;
}

.video-panel{
  padding:0;
}
.pv-embed{
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  background:#000;
  border:0;
}

.update-history{
  display:grid;
  gap:18px;
}
.update-block{
  max-width:780px;
  padding:0;
  border-top:0;
}
.update-head{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.version{
  margin:0;
  font-size:19px;
  font-weight:700;
  color:var(--accent);
}
.update-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--accent);
  font-size:13px;
  font-weight:700;
}
.update-icon{
  display:block;
  width:auto;
  height:16px;
}
.update-list{
  margin:0;
  padding-left:1.25rem;
  font-size:14px;
  color:var(--muted);
}
.update-list li + li{
  margin-top:4px;
}

.link-list{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}
.icon-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.social-icon{
  display:block;
  width:auto;
  height:36px;
  max-width:42px;
}
.link-list a{
  color:var(--accent);
  font-size:11px;
  font-weight:600;
}
.link-list .link-text{
  font-size:13px;
  font-weight:700;
}
#links .section-head{
  margin-bottom:14px;
}
#links .section-head h2{
  font-size:clamp(16px,2.2vw,20px);
  font-weight:600;
}

.site-footer{
  border-top:1px solid var(--line);
  padding:8px 0 28px;
  color:var(--muted);
}

@media (max-width: 860px){
  .hero{
    padding-top:42px;
  }
  .screenshot-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 560px){
  .screenshot-grid{
    grid-template-columns:1fr;
  }
}