:root{
  /* surface & ink — warm cream paper + storybook ink */
  --bg:            #FBF7EF;
  --surface:       #FFFFFF;
  --surface-alt:   #F4EEE2;
  --fg:            #2E3A3A;
  --fg-strong:     #1B2424;
  --muted:         #7A8888;
  --border:        #ECE4D2;
  --border-strong: #D8CFB8;

  /* accent — Mini-Mini cheek pale teal-blue (NOT green) */
  --accent:        #8FC2C8;
  --accent-soft:   #CFE1E1;
  --accent-strong: #5FA0A8;
  --accent-bg:     #EAF3F3;

  /* category palette — same pastel tonal family */
  --cat-payments:       #F0B89A;
  --cat-customer:       #F4C97A;
  --cat-browser:        #9FC9E8;
  --cat-workflow:       #C8B6E0;
  --cat-memory:         #E8B7C3;
  --cat-search:         #B6D7A8;
  --cat-voice:          #F5BFB3;
  --cat-observability:  #B5C8D8;
  --cat-mcp:            #A8D0C8;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 14px;
  --space-4: 22px;
  --space-5: 36px;
  --space-6: 64px;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;

  --shadow-sm: 0 1px 2px rgba(46,58,58,0.04);
  --shadow-md: 0 6px 18px rgba(46,58,58,0.06), 0 1px 2px rgba(46,58,58,0.04);
  --shadow-lg: 0 18px 40px rgba(46,58,58,0.10), 0 2px 6px rgba(46,58,58,0.05);
}

*{box-sizing:border-box}
html, body{
  margin:0; padding:0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  font-size:16px;
  line-height:1.75;
  letter-spacing: 0.01em;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing:antialiased;
}
body{
  background:
    radial-gradient(1200px 600px at 50% -100px, #EAF3F3 0%, transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
a{color: var(--accent-strong); text-decoration:none}
a:hover{text-decoration: underline}

.container{max-width: 1100px; margin: 0 auto; padding: 0 24px}

/* ---------- SITE NAV ---------- */
.site-nav{
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,247,239,0.85);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-nav .container{
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; gap: var(--space-3);
}
.brand{
  display:inline-flex; align-items:center; gap:8px;
  font-size:15px; font-weight:700; color: var(--fg-strong);
  letter-spacing:-0.005em; text-decoration:none;
}
.brand:hover{text-decoration:none; color: var(--accent-strong)}
.brand-mark{font-size:20px}
.nav-links{display:flex; gap: var(--space-4); align-items: center}
.nav-links a{
  font-size:14px; font-weight:500; color: var(--muted);
  text-decoration:none; transition: color 0.15s;
}
.nav-links a:hover{color: var(--fg-strong); text-decoration:none}
@media(max-width:680px){
  .site-nav .container{height: 56px}
  .brand-name{display:none}
  .nav-links{gap: var(--space-3)}
  .nav-links a{font-size:13px}
}

/* ---------- HERO ---------- */
.hero{
  position: relative;
  padding: var(--space-6) 0 var(--space-5);
  background:
    radial-gradient(800px 320px at 85% 60%, rgba(143,194,200,0.30) 0%, transparent 65%),
    linear-gradient(180deg, #DCEFEF 0%, #EAF3F3 55%, var(--bg) 100%);
  overflow: hidden;
  text-align: center;
}
.hero-mascot{
  position: absolute; right: -24px; bottom: -32px;
  width: 200px; height: 200px; object-fit: cover;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  border: 4px solid var(--surface);
  transform: rotate(-6deg);
  pointer-events: none;
}
.hero .container{position: relative; z-index: 1; display:grid; grid-template-columns: 1fr; gap: var(--space-3)}
.hero-text{max-width: 760px; margin: 0 auto}
.hero h1{
  margin:0 0 var(--space-3);
  font-size:42px; font-weight:700; line-height:1.2; letter-spacing:-0.02em;
  color: var(--fg-strong);
}
.hero-bubble{display:inline-block; animation: float 3s ease-in-out infinite; transform-origin:center}
.tagline{margin:0 0 var(--space-3); color: var(--fg); font-size:16px; line-height:1.8}
.tagline strong{color: var(--accent-strong); font-weight:700}
.tagline a{color: var(--accent-strong)}
.meta{display:flex; flex-wrap:wrap; gap: var(--space-2); justify-content: center}
.badge{
  display:inline-flex; align-items:center; gap:4px;
  padding:6px 14px; border-radius:999px;
  background: var(--surface); border:1px solid var(--border);
  font-size:12.5px; letter-spacing:0.02em; color: var(--muted);
  box-shadow: var(--shadow-sm);
}
.badge time, .badge #count{color: var(--fg-strong); font-weight:600}

/* ---------- CONTROLS ---------- */
.controls{margin: var(--space-5) auto var(--space-4); max-width: 760px; padding: 0 24px}
.controls-label, .tabs-label{
  display:block; font-size:13px; font-weight:600; color: var(--fg-strong);
  letter-spacing:0.02em; margin-bottom: var(--space-2);
}
#search{
  width:100%;
  padding:16px 22px;
  font: inherit; font-size:16px;
  background: var(--surface); color: var(--fg);
  border:1.5px solid var(--accent-soft); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  outline: none; transition: border-color 0.18s, box-shadow 0.18s;
}
#search::placeholder{color: var(--muted); opacity:0.85}
#search:focus{border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg)}

.tabs-wrap{margin-top: var(--space-4)}
.tabs{display:flex; flex-wrap:wrap; gap: var(--space-2)}
.tab{
  padding:7px 14px;
  border-radius:999px; border:1px solid var(--border);
  background: transparent; color: var(--muted);
  font: inherit; font-size:12.5px; letter-spacing:0.02em; font-weight:500;
  cursor: pointer; transition: all 0.15s;
  display:inline-flex; align-items:center; gap:6px;
}
.tab:hover{background: var(--accent-bg); color: var(--fg)}
.tab.active{
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--fg-strong);
}
.tab-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:999px;
  background: rgba(143,194,200,0.18); color: var(--muted);
  font-size:11px; font-weight:600;
}
.tab.active .tab-count{background: rgba(255,255,255,0.55); color: var(--fg-strong)}

/* ---------- GRID ---------- */
.catalog{padding: var(--space-2) 0 var(--space-6)}
.grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3)}

.card{
  display:flex; flex-direction:column; gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface);
  border:1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  color: var(--fg); text-decoration:none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
  position:relative; overflow:hidden;
}
.card::before{
  content:""; position:absolute;
  left:0; top: var(--space-4); bottom: var(--space-4);
  width:4px; border-radius:4px;
  background: var(--card-color);
  opacity:1;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
  text-decoration: none;
}
.card-head{display:flex; align-items:center; justify-content:space-between; gap: var(--space-2)}
.cat-tag{
  display:inline-block; padding:4px 10px; border-radius: var(--radius-sm);
  font-size:12.5px; font-weight:600; letter-spacing:0.02em;
}
.card-domain{
  font-size:12px; color: var(--muted); letter-spacing:0;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", monospace;
}
.card-name{
  margin:4px 0 0; font-size:17px; font-weight:700;
  color: var(--fg-strong); letter-spacing:-0.005em; line-height:1.4;
}
.card-tagline{
  margin:0; color: var(--accent-strong); font-size:14px; font-weight:500; line-height:1.55;
}
.card-summary{margin:4px 0 0; color: var(--fg); font-size:14px; line-height:1.75}
.card-note{
  margin: var(--space-2) 0 0;
  padding:10px 12px; border-radius: var(--radius-sm);
  background: var(--accent-bg);
  border:1px dashed var(--accent-soft);
  color: var(--accent-strong); font-size:13px; font-weight:500;
}

.empty{text-align:center; color: var(--muted); padding: var(--space-5)}

/* ---------- NOTE ---------- */
.note{
  margin: var(--space-5) auto var(--space-4);
  padding: var(--space-4);
  background: var(--surface-alt);
  border-radius: var(--radius-md);
}
.note h2{margin:0 0 12px; font-size:20px; font-weight:700; color: var(--fg-strong)}
.note p{margin:0 0 10px; color: var(--fg); font-size:15.5px; line-height:1.85}
.note p:last-child{margin:0}
.note code{
  background: var(--accent-bg); color: var(--accent-strong);
  padding:2px 6px; border-radius:6px; font-size:13px;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", monospace;
}

/* ---------- FOOTER ---------- */
footer{
  padding: var(--space-5) 0 var(--space-5);
  color: var(--muted); font-size:13px;
  border-top:1px solid var(--border);
  margin-top: var(--space-5);
  background: var(--surface-alt);
}
.foot-row{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-3);
}
.foot-brand{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; color: var(--fg-strong); font-size:14px;
}
.foot-links{display:flex; gap: var(--space-4); flex-wrap:wrap}
.foot-links a{color: var(--muted); font-size:13px}
.foot-links a:hover{color: var(--fg-strong); text-decoration:none}
.foot-meta{font-size:12.5px; color: var(--muted)}
.foot-meta a{color: var(--accent-strong)}
.mini-bubble{font-size:18px; animation: float 3s ease-in-out infinite; display:inline-block}
@keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)}}
@media(max-width:680px){
  .foot-row{flex-direction:column; align-items:flex-start; gap: var(--space-3)}
}

/* ---------- responsive ---------- */
@media(max-width:680px){
  .hero{padding: var(--space-5) 0 var(--space-4)}
  .hero h1{font-size:28px}
  .hero-mascot{width:120px; height:120px; right:-12px; bottom:-20px; border-width:3px}
  .meta{justify-content:center}
  .controls{padding: 0 18px}
  #search{padding:14px 18px; font-size:15px}
  .grid{grid-template-columns: 1fr; gap: var(--space-3)}
  .card{padding: var(--space-3)}
  h2{font-size:20px}
}