*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:#fff;
  color:#000;
  font-family:"Source Sans 3","Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:17px;
  line-height:1.7;
  font-weight:400;
  letter-spacing:.01em;
  overflow-x:clip;
}

img{max-width:100%;height:auto;display:block}
a{color:#000;text-decoration:none}
p{margin:0}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;
  top:0;
  z-index:30;
  background:#fff;
  border-bottom:2px solid #000;
}

.topbar-in{
  max-width:1280px;
  margin:0 auto;
  padding:0 20px;
}

.topbar-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:64px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:.16em;
  white-space:nowrap;
}

.brand .mark{
  width:28px;
  height:28px;
  border:1.5px solid #000;
  border-radius:50%;
}

.contact{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:8px 20px;
  border:1.5px solid #000;
  border-radius:999px;
  font-size:.92rem;
  letter-spacing:.12em;
  transition:background .18s ease,color .18s ease;
}

.contact:hover,.contact:focus-visible{background:#000;color:#fff}

.anchornav{border-top:1px solid #000}

.anchornav p{
  display:flex;
  flex-wrap:wrap;
  margin:0;
}

.anchornav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:9px 16px 9px 0;
  margin-right:16px;
  font-size:.9rem;
  letter-spacing:.04em;
  border-bottom:2px solid transparent;
  transition:border-color .18s ease;
}

.anchornav a:hover,.anchornav a:focus-visible{border-bottom-color:#000}

/* ---------- hero ---------- */
.hero{
  min-height:45vh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:56px 20px 48px;
  border-bottom:2px solid #000;
  background-color:#fff;
  background-image:radial-gradient(rgba(0,0,0,.17) 1px, transparent 1px);
  background-size:24px 24px;
  background-position:center;
}

.hero h1{
  margin:0;
  max-width:22ch;
  font-size:clamp(2.3rem,8.4vw,6.4rem);
  line-height:1.02;
  font-weight:700;
  letter-spacing:-.02em;
  overflow-wrap:break-word;
}

/* ---------- main grid ---------- */
main{
  max-width:1280px;
  margin:0 auto;
  padding:32px 20px 56px;
  display:grid;
  grid-template-columns:224px minmax(0,1fr);
  gap:32px;
  align-items:start;
}

/* ---------- aside ---------- */
aside.side{
  position:sticky;
  top:132px;
  border-top:3px solid #000;
  padding-top:14px;
}

aside.side h2{
  margin:0 0 4px;
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.24em;
}

aside.side .subtitle{
  margin:0 0 14px;
  font-size:.78rem;
  letter-spacing:.18em;
  opacity:.58;
}

aside.side ol{
  list-style:none;
  counter-reset:idx;
  margin:0;
  padding:0;
}

aside.side li{
  counter-increment:idx;
  border-bottom:1px solid #000;
}

aside.side li:first-child{border-top:1px solid #000}

aside.side li a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:8px 0;
  font-size:.88rem;
  line-height:1.35;
  transition:padding-left .18s ease;
}

aside.side li a::before{
  content:counter(idx,decimal-leading-zero);
  font-family:"Bebas Neue","Source Sans 3",sans-serif;
  font-size:1rem;
  letter-spacing:.06em;
  opacity:.55;
}

aside.side li a:hover,aside.side li a:focus-visible{padding-left:8px}

/* ---------- article ---------- */
article.body{min-width:0}

article.body > div{
  border:1px solid #000;
  border-radius:28px;
  padding:34px 28px;
  margin:0 0 16px;
  background:#fff;
  scroll-margin-top:132px;
}

article.body > div:last-child{margin-bottom:0}

article.body h2{
  margin:0 0 10px;
  font-size:clamp(1.35rem,2.9vw,1.95rem);
  line-height:1.2;
  font-weight:700;
  letter-spacing:-.01em;
  overflow-wrap:break-word;
}

article.body h3{
  margin:26px 0 8px;
  font-size:1.12rem;
  line-height:1.35;
  font-weight:700;
}

article.body p{margin:0 0 16px}
article.body p:last-child{margin-bottom:0}

article.body .subtitle,
article.body p.subtitle,
article.body p.subhead,
article.body p.desc,
article.body p.lead{
  margin:0 0 20px;
  font-size:.9rem;
  letter-spacing:.1em;
  opacity:.6;
}

article.body ul,
article.body ol{
  margin:0 0 18px;
  padding-left:22px;
}

article.body li{margin-bottom:9px}

article.body a{
  border-bottom:1px solid #000;
  transition:background .16s ease,color .16s ease;
}

article.body a:hover,article.body a:focus-visible{background:#000;color:#fff}

article.body strong{font-weight:700}

article.body blockquote{
  margin:20px 0;
  padding:6px 0 6px 20px;
  border-left:3px solid #000;
  font-weight:500;
}

article.body img{
  margin:20px 0;
  border:1px solid #000;
  border-radius:16px;
}

article.body hr{
  border:0;
  border-top:1px solid #000;
  margin:26px 0;
}

article.body code{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.92em;
  border:1px solid #000;
  border-radius:4px;
  padding:1px 5px;
}

article.body table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 18px;
  font-size:.95rem;
}

article.body th,article.body td{
  border:1px solid #000;
  padding:9px 12px;
  text-align:left;
}

/* ---------- footer ---------- */
footer{
  max-width:1280px;
  margin:0 auto;
  padding:26px 20px 34px;
  border-top:2px solid #000;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px 20px;
  align-items:center;
  font-size:.9rem;
}

footer p{margin:0}

footer .f-brand{font-weight:700;letter-spacing:.16em}

footer .f-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:4px 20px;
}

footer .f-links a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  border-bottom:1px solid #000;
}

footer .f-links a:hover,footer .f-links a:focus-visible{
  background:#000;
  color:#fff;
}

footer .f-copy{
  text-align:right;
  font-size:.78rem;
  letter-spacing:.08em;
  opacity:.7;
}

/* ---------- reveal ---------- */
@media (prefers-reduced-motion: no-preference){
  .js main article > div,
  .js main aside.side{
    opacity:0;
    transform:translateY(14px);
    transition:opacity .62s ease,transform .62s ease;
  }
  .js main article > div.in,
  .js main aside.side.in{
    opacity:1;
    transform:none;
  }
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}

/* ---------- narrow ---------- */
@media (max-width:860px){
  main{
    grid-template-columns:minmax(0,1fr);
    gap:20px;
    padding:24px 16px 44px;
  }

  aside.side{
    position:static;
    padding-bottom:4px;
  }

  aside.side ol{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:16px;
  }

  aside.side li:first-child{border-top:0}

  article.body > div{
    padding:26px 18px;
    border-radius:22px;
    scroll-margin-top:150px;
  }

  footer{
    grid-template-columns:minmax(0,1fr);
    text-align:left;
    padding:22px 16px 30px;
  }

  footer .f-links{justify-content:flex-start;gap:4px 16px}
  footer .f-copy{text-align:left}
}

@media (max-width:420px){
  body{font-size:16px}

  .topbar-in{padding:0 14px}

  .anchornav a{
    font-size:.86rem;
    margin-right:10px;
    padding-right:8px;
  }

  .hero{padding:44px 14px 38px}
  .hero h1{font-size:clamp(2rem,10.5vw,3rem)}

  aside.side ol{grid-template-columns:minmax(0,1fr)}
}
</｜DSML｜ parameter>
</｜DSML｜ invoke>
</｜DSML｜ calls>

button[aria-expanded]{min-width:44px;min-height:44px}