@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@400;500;600;700&display=swap');

:root{
  --lime:#80ff00;
  --neon:#00ff00;
  --ink:#1f2617;
  --paper:#f4f7ea;
  --card:#ffffff;
  --line:3px solid var(--ink);
  --r:28px;
  --serif:'Noto Serif JP','Songti SC','Source Han Serif SC',serif;
  --sans:'Noto Sans JP','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  padding-bottom:104px;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.8;
  color:var(--ink);
  background-color:var(--paper);
  background-image:radial-gradient(rgba(31,38,23,.22) 1.4px, transparent 1.5px);
  background-size:24px 24px;
  overflow-x:hidden;
}

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

p{margin:0 0 1.1em}
img{max-width:100%;height:auto}

a{color:var(--ink)}
a:hover{color:#0c0f08}

:focus-visible{
  outline:3px solid var(--neon);
  outline-offset:3px;
}

h1,h2,h3,h4{
  font-family:var(--serif);
  line-height:1.25;
  letter-spacing:-.01em;
}

h2>span,h3>span{
  display:inline-block;
  background:linear-gradient(transparent 58%, var(--lime) 58%);
  padding:0 .12em;
  transform:rotate(-.6deg);
}

/* ---------- 顶部主视觉 ---------- */

.hero{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  align-items:center;
  gap:clamp(14px,3vw,36px);
  min-height:45vh;
  padding:clamp(18px,3vw,34px) clamp(14px,3vw,30px);
  border-bottom:var(--line);
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.75) 0 26%, transparent 27%),
    linear-gradient(120deg, var(--lime) 0%, #b6ff5c 48%, var(--paper) 100%);
}

.hero-media{position:relative}
.hero-media:empty{display:none}
.hero-img{
  display:block;
  width:100%;
  border:var(--line);
  border-radius:var(--r);
  transform:rotate(-1.6deg);
  filter:saturate(150%) contrast(1.05);
  background:var(--card);
}

.hero-copy{text-align:center}

.sticker{
  display:inline-block;
  margin:0 0 14px;
  padding:5px 16px;
  font-family:var(--serif);
  font-size:15px;
  letter-spacing:.06em;
  background:var(--neon);
  border:var(--line);
  border-radius:999px;
  transform:rotate(-5deg);
  animation:jitter 3.4s ease-in-out infinite;
}

.hero h1{
  margin:0 0 .5em;
  font-size:clamp(30px,6.4vw,58px);
  font-weight:700;
  text-shadow:3px 3px 0 var(--neon);
}

.lede{
  max-width:38ch;
  margin:0 auto;
  font-size:16px;
  line-height:1.75;
}

/* ---------- 跑马灯 ---------- */

.ticker{
  overflow:hidden;
  border-bottom:var(--line);
  background:var(--ink);
  color:var(--lime);
}

.ticker-track{
  display:inline-flex;
  gap:2.2em;
  padding:7px 0;
  font-family:var(--serif);
  font-size:15px;
  letter-spacing:.14em;
  white-space:nowrap;
  animation:slide 24s linear infinite;
}

/* ---------- 主体框架 ---------- */

.frame{
  display:grid;
  grid-template-columns:minmax(0,206px) minmax(0,1fr);
  gap:clamp(16px,3vw,40px);
  max-width:1120px;
  margin:0 auto;
  padding:clamp(20px,3.4vw,42px) clamp(14px,3vw,26px);
}

.side{
  position:sticky;
  top:16px;
  align-self:start;
  padding:14px 12px;
  background:var(--card);
  border:var(--line);
  border-radius:var(--r);
  transform:rotate(-.9deg);
}

.side h2{font-size:17px;margin:0 0 10px}
.side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}

.side a{
  display:block;
  padding:9px 8px;
  min-height:42px;
  font-size:16px;
  text-decoration:none;
  border-radius:14px;
  border:2px solid transparent;
}

.side a:hover{
  background:var(--lime);
  border-color:var(--ink);
}

main{min-width:0}

article{
  background:var(--card);
  border:var(--line);
  border-radius:var(--r);
  padding:clamp(16px,3vw,34px);
}

article div[id]{
  scroll-margin-top:18px;
  padding:clamp(20px,3vw,34px) 0;
  border-top:3px dashed rgba(31,38,23,.28);
}

article div[id]:first-of-type{border-top:0;padding-top:0}

article h2{
  font-size:clamp(22px,3.6vw,30px);
  margin:0 0 .7em;
}

article h3{
  font-size:clamp(19px,2.8vw,23px);
  margin:1.4em 0 .6em;
}

article p{margin:0 0 1.1em}
article ul,article ol{padding-left:1.3em;margin:0 0 1.1em}
article li{margin:.35em 0}

article img{
  border:var(--line);
  border-radius:20px;
  margin:.5em 0;
}

article a{
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  text-decoration-color:var(--neon);
}

article blockquote{
  margin:1.2em 0;
  padding:.9em 1.1em;
  background:rgba(128,255,0,.22);
  border-left:6px solid var(--ink);
  border-radius:0 18px 18px 0;
}

article code{
  font-size:15px;
  background:rgba(31,38,23,.08);
  padding:.1em .35em;
  border-radius:6px;
}

.tail{
  margin-top:clamp(16px,3vw,26px);
  padding-top:22px;
  border-top:3px dashed rgba(31,38,23,.28);
}

.tail h2{font-size:19px;margin:0 0 12px}

.up{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:8px 22px;
  font-family:var(--serif);
  font-size:16px;
  text-decoration:none;
  background:var(--lime);
  border:var(--line);
  border-radius:999px;
  transform:rotate(-1.4deg);
  transition:transform .18s ease;
}

.up:hover{transform:rotate(1.6deg) scale(1.04)}

/* ---------- 页脚 ---------- */

footer{
  max-width:1120px;
  margin:0 auto;
  padding:clamp(24px,5vw,46px) clamp(14px,3vw,26px) 40px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  border-top:var(--line);
}

footer p{margin:0}

footer .mega{
  font-family:var(--serif);
  font-size:clamp(26px,6.6vw,54px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.03em;
}

footer .copy{text-align:center;font-size:15px;opacity:.85}
footer small{text-align:right;font-size:14px;opacity:.75;letter-spacing:.05em}

/* ---------- 底部固定条 ---------- */

.bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:60;
  background:var(--ink);
  border-top:3px solid var(--lime);
}

.bar nav{
  display:flex;
  align-items:center;
  gap:4px;
  max-width:1120px;
  margin:0 auto;
  padding:8px 10px;
  overflow-x:auto;
  scrollbar-width:thin;
}

.grp{
  display:flex;
  align-items:center;
  gap:2px;
  list-style:none;
  margin:0;
  padding:0;
  flex:1 0 auto;
}

.grp-a{justify-content:flex-end}

.bar a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:8px 11px;
  font-size:16px;
  color:var(--lime);
  text-decoration:none;
  border-radius:999px;
  white-space:nowrap;
}

.bar a:hover,
.bar a:focus-visible{
  background:rgba(128,255,0,.18);
  color:var(--neon);
}

.bar .brand{
  flex:0 0 auto;
  padding:8px 20px;
  font-family:var(--serif);
  font-weight:700;
  color:var(--ink);
  background:var(--lime);
  border:2px solid var(--neon);
  border-radius:999px;
  transform:rotate(-1.5deg);
}

.bar .brand:hover{background:var(--neon);color:var(--ink)}

.bar .contact{
  flex:0 0 auto;
  border:2px solid var(--lime);
  border-radius:999px;
}

.has-sub{position:relative}

.has-sub>ul{
  position:absolute;
  left:0;
  bottom:calc(100% + 12px);
  display:none;
  min-width:158px;
  list-style:none;
  margin:0;
  padding:6px;
  background:var(--card);
  border:var(--line);
  border-radius:22px;
}

.has-sub>ul a{color:var(--ink);min-height:42px}
.has-sub>ul a:hover{background:var(--lime);color:var(--ink)}

.has-sub:hover>ul,
.has-sub:focus-within>ul{display:block}

/* ---------- 动效 ---------- */

@keyframes slide{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

@keyframes jitter{
  0%,100%{transform:rotate(-5deg) translateY(0)}
  50%{transform:rotate(-2deg) translateY(-3px)}
}

/* ---------- 断点 ---------- */

@media (min-width:900px){
  .bar nav{overflow:visible}
}

@media (max-width:899px){
  .has-sub>ul{display:none}
}

@media (max-width:860px){
  .frame{grid-template-columns:1fr}
  .side{position:static;transform:none}
  .side ul{flex-direction:row;flex-wrap:wrap}
  .side a{min-height:40px;padding:8px 10px;font-size:15px;border-radius:999px;border-color:rgba(31,38,23,.25)}
}

@media (max-width:720px){
  .hero{
    grid-template-columns:1fr;
    min-height:0;
    padding-block:22px 26px;
    background:linear-gradient(160deg, var(--lime) 0%, var(--paper) 88%);
  }
  .hero-copy{order:-1;text-align:left}
  .lede{margin:0}
  .sticker{font-size:14px;margin-bottom:10px}
  .hero h1{font-size:clamp(28px,8.4vw,40px)}
  footer{
    grid-template-columns:1fr;
    text-align:center;
    gap:10px;
  }
  footer .copy,footer small{text-align:center}
  .bar .brand{padding:8px 14px;font-size:15px}
}

@media (max-width:420px){
  .bar a{padding:8px 9px;font-size:15px}
  .bar .contact{padding:8px 12px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
</｜DSML｜ parameter>
</｜DSML｜ invoke>
</｜DSML｜ calls>

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