:root { --bg:#f5f5f7; --ink:#1d1d1f; --muted:rgba(0,0,0,.48); --blue:#0071e3; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:system-ui,-apple-system,"PingFang SC","Segoe UI",sans-serif; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
.nav { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; height:52px; padding:0 18px; background:rgba(255,255,255,.72); backdrop-filter:saturate(180%) blur(20px); }
.nav strong,.home { font-size:17px; }
.nav form { display:flex; }
.nav input { width:148px; border:0; border-radius:12px; padding:8px 12px; background:#e8e8ed; color:var(--ink); outline:none; }
.quiet { color:var(--blue); font-size:15px; }
main { width:min(1080px,calc(100% - 32px)); margin:0 auto 56px; }
.intro { padding:42px 0 18px; text-align:center; }
.intro p,.profile p { margin:0; color:var(--muted); font-size:14px; }
h1 { margin:6px 0 0; font-size:48px; line-height:1.08; letter-spacing:-.4px; }
.kinds { display:flex; gap:18px; justify-content:center; margin:8px 0 28px; overflow-x:auto; scrollbar-width:none; }
.kinds::-webkit-scrollbar { display:none; }
.kinds a { flex:0 0 auto; color:var(--muted); text-align:center; }
.kinds small { display:block; margin-top:2px; font-size:12px; }
.kinds .on { color:var(--blue); }
.board { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:18px; }
.tile { display:block; overflow:hidden; border-radius:18px; background:white; box-shadow:rgba(0,0,0,.08) 0 8px 24px; }
.tile img { display:block; width:100%; aspect-ratio:1; object-fit:cover; background:white; }
.tile div { padding:12px; }
.tile strong { display:block; font-size:16px; }
.tile span,.profile span { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.sheet { width:min(760px,calc(100% - 32px)); }
.profile { padding:34px 0 8px; text-align:center; }
.profile img { width:132px; height:132px; object-fit:cover; border-radius:32px; background:white; box-shadow:rgba(0,0,0,.12) 0 10px 28px; }
.stack { display:grid; gap:12px; margin-top:28px; }
.stack article { padding:20px; border-radius:18px; background:white; }
.stack small { color:var(--blue); font-size:13px; font-weight:650; }
.stack p { margin:8px 0 0; font-size:16px; line-height:1.6; }
@media (min-width:760px) { .stack.two,.stack { grid-template-columns:1fr 1fr; } .stack article:last-child:nth-child(odd) { grid-column:1 / -1; } }
@media (max-width:759px) {
  main,.sheet { width:calc(100% - 24px); }
  h1 { font-size:36px; }
  .intro { padding-top:28px; }
  .board { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .stack { grid-template-columns:1fr; }
  .nav input { width:118px; }
}